vuejs получить HTML из определенной части в компоненте

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 через флажок, «отображаемый» в редакторе.

Что у меня сейчас:

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

    }

Я пытаюсь получить html с помощью $ refs, но я не получаю 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;