vuejs get html from specific part in component

Question

I have 3 different card :

<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>

It displays three different strcuture of card (the only element changing is the image that is not at the same place). When I check a checkbox I would like to stock the html corresponding to it. After clicking on an edit button I have the html selected via the checkbox, "displayed" in an editor.

What I have now :

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;
        }
      },

    }

I'm trying to get html with $refs but I'm not getting html so I tried this.$refs.models_i.$el.innerHtml but of course it's not working. I don't know how to get the specific html, how can I do that ?

Answer 1

When a reference is repeated, it's accessed as an array, so with

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

You can access

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

Since <el-card> is (presumably) a Vue component, to get the actual HTML you can use:

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