vuejs 访问 v-for 组件内的 ref

Question

通过 v-for 循环渲染一些组件。引用的定义如下： :ref="'category_' + index" 这是这些引用在控制台中的显示方式console.log(this.$refs)：

category_0: [VueComponent]
category_1: [VueComponent]
category_2: [VueComponent]
category_3: [VueComponent]
category_4: [VueComponent]
category_5: [VueComponent]
category_6: [VueComponent]
category_7: [VueComponent]
category_8: [VueComponent]
__proto__: Object

如果我尝试像这样访问：console.log(this.$refs.category_0)，我会得到undefined。任何其他定义的引用（不称为“category_..”）都可以正常工作。

这里似乎出了什么问题？

<el-form-item v-for="(category,index) in Object.Products" :key="index" 
  :label="category.Name">

    <Select-product v-model="category.IdSelected" :ref="'category'" 
      ProductCategory='Ingredient' @return="handleSelectIngredient"/> 

</el-form-item>

Answer 1

当您在 Vue 上分配引用时，v-for会将所有这些引用拉入一个数组中。所以没有必要:ref="'category_' + index"。

相反，您可以ref="category"像这样访问 ref this.$refs.category[0]。

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3, 4, 5]
  },
  methods: {
    test() {
      console.log(this.$refs.category);
      console.log(this.$refs.category[0]);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="nbr in arr" ref="category">
    {{ nbr }}
  </div>
  <button @click="test">
    test
  </button>
</div>

当 ref 与 v-for 一起使用时，您得到的 ref 将是一个包含镜像数据源的子组件的数组。

https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements