vuejs从组件

Question

我有3张不同的卡片：

<el-card class="box-card" v-for="i in 3" :key="i" ref="models_i"> 
      <el-form>
        <el-checkbox v-model="isChecked[i]" v-on:change="checkif(i)" style="float: right; padding: 3px 0" type="text"></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>

它显示三种不同的卡片结构（唯一改变的元素是不在同一位置的图像）。当我选中一个复选框时，我想存储与之对应的html。点击编辑按钮后，我通过复选框选择了html，＆＃34;显示＆＃34;在编辑。

我现在拥有的：

props: {
      signature: {
        type: Object,
        note: 'The signature object to display'
      }
    },

 data() {
      return {
        isChecked: {},
        sign: this.signature
      };
    },
methods: {
      checkif(i){
        for(let key in this.isChecked){
          if(i != key){
            this.isChecked[key] = false;
          }
        }
        if(this.isChecked[i] == true){
          this.sign = this.$refs.models_i;
        }
      },

    }

我试图通过$ refs获取HTML，但我没有获得HTML，所以我尝试了这个。$ refs.models_i。$ el.innerHtml但当然它不起作用。我不知道如何获取特定的HTML，我该怎么做？

Answer 1

重复引用时，它将作为数组访问，因此使用

<el-card class="box-card" v-for="i in 3" :key="i" ref="models">

您可以访问

this.$refs.models[0];
this.$refs.models[1];
// etc.

由于<el-card>（推测）是Vue组件，因此要获取实际的HTML，您可以使用：

this.$refs.models[0].$el;