时间戳

首页 > 解决方案 > vuejs 从组件中的特定部分获取 html

vuejs2 - vuejs 从组件中的特定部分获取 html

问题描述

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

    }

我正在尝试使用 $refs 获取 html，但我没有获取 html，所以我尝试了 this.$refs.models_i.$el.innerHtml 但当然它不起作用。我不知道如何获取特定的 html，我该怎么做？

标签： vuejs2

解决方案

当一个引用被重复时，它作为一个数组被访问，所以使用

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

推荐阅读