Vue.js中如何获取组件内特定Element UI卡片的HTML内容？

我来帮你搞定这个问题，咱们一步步拆解：

首先，你遇到的核心问题有几个小细节没处理对，我先给你指出来，再给你修正后的代码：

问题根源 #

1. v-for 里的 ref 是数组，不是单个元素：当你在循环里用同一个ref="models_i"时，Vue会自动把所有匹配的卡片组件收集成一个数组存在this.$refs.models_i里，直接拿this.$refs.models_i肯定不对，得按索引取对应卡片。
2. 拼写错误：是innerHTML（大写H）不是innerHtml，这个小失误直接导致你拿不到DOM内容。
3. 复选框逻辑可以更简洁：取消其他复选框选中状态的代码可以优化，同时要确保只有勾选时才去获取HTML。

修正后的完整代码 #

模板部分（基本不变，确认ref名称即可）

<el-card class="box-card" v-for="i in 3" :key="i" ref="models_i">
  <el-form>
    <el-checkbox 
      v-model="isChecked[i]" 
      @change="checkif(i)" 
      style="float: right; padding: 3px 0" 
    ></el-checkbox>
    <!-- 下面的卡片内容完全保留你的原有代码 -->
    <div v-bind:class="{'bottom': i == 3}">
      <div class="text item" v-bind:class="{'top': i == 1, 'left': i == 2}">
        <img src="https://unity3d.com/profiles/unity3d/themes/unity/images/ui/icons/other/user-default128x128.png" v-bind:class="{'bottomImg': i == 3}"/>
      </div>
      <div v-bind:class="{'left': i == 2}">
        <div class="text fullname" style ="font-weight: bold;"> {{ user | userFullname }} </div>
        <div class="text post" style="color:#DAD9E1;"> Poste, Service </div>
        <div class="text company" style ="font-weight: bold;"> {{ user.companyId.company_name }} </div>
        <div class="info">
          <div class="telephone">
            <div class="label tel">
              <label for="tel">Tél.</label>
              <span>01 00 00 00 00</span>
            </div>
            <div class="label mob">
              <label for="mob">Mob.</label>
              <span>06 00 00 00 00</span>
            </div>
          </div>
          <div class="label website">
            <label for="website">Website.</label>
            <span>www.entreprise.com</span>
          </div>
          <div class="label email">
            <label for="email">E-mail.</label>
            <span> {{ user.email }}</span>
          </div>
        </div>
      </div>
    </div>
  </el-form>
</el-card>

脚本部分

props: {
  signature: {
    type: Object,
    note: 'The signature object to display'
  }
},
data() {
  return {
    // 初始化3个卡片的勾选状态，对应i=1、2、3
    isChecked: { 1: false, 2: false, 3: false },
    sign: this.signature
  };
},
methods: {
  checkif(i) {
    // 一键取消其他所有卡片的勾选
    Object.keys(this.isChecked).forEach(key => {
      if (key != i) this.isChecked[key] = false;
    });
    
    // 只有当前复选框被勾选时，才获取对应卡片的HTML
    if (this.isChecked[i]) {
      // 因为v-for的ref是数组，索引从0开始，所以用i-1定位对应卡片
      const targetCard = this.$refs.models_i[i - 1];
      if (targetCard) {
        // 这里注意是innerHTML！
        this.sign = targetCard.$el.innerHTML;
      }
    } else {
      // 如果取消勾选，这里可以根据需求清空sign或者保留之前的内容
      this.sign = null;
    }
  }
}

额外提醒 #

• 之后你要把this.sign的内容传给编辑器，只要编辑器支持设置HTML内容，直接把这个值传进去就行。
• 确保调用checkif时卡片已经挂载到DOM上（Vue会在组件mounted之后填充$refs，而复选框的change事件肯定是在挂载后触发的，所以不用担心这个问题）。

内容的提问来源于stack exchange，提问作者Fanto