动态参考

Question

 <modal v-for="(data,key) in passedInData" :key="data.id" :ref="'modal' + key">    
 <img src="~/assets/images/lock.svg" @click="openModal(key)"  style="cursor:pointer" > 

    openModal: function(id) {
      let modal = this.$refs['modal' + id];
      let index = 'modal' + id;
      console.log(this.$refs['modal' + id]);
      console.log(this.$refs[index].showModal); 
    }

我正在使用v-for遍历组件，并为每个元素提供动态引用。 单击按钮后，我调用一个函数，如果我执行console.log（this。$ refs [index]），则返回正确的引用，但是当我尝试通过以下方式调用方法时：console.log（this。$ refs [ index] .showModal），在这种情况下，showModal是子组件中的方法，它返回未定义的值。

Answer 1

我已通过以下方法解决了此问题： this。$ refs [index] [0] .showModal（）;