Vue.js vuejs访问v-for组件内部的ref

从v-for循环渲染某些组件。参照的定义如下：

：ref=“'category\'+index”

以下是这些引用在控制台中的显示方式：

console.log（This.$refs）

：

如果我尝试这样访问：

console.log（this.$refs.category\u 0）

，我会得到未定义的。 任何其他定义的ref（不称为“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>

---

当您在

v-for

Vue上指定ref时，Vue将拉取阵列中的所有这些ref。因此不需要

：ref=“'category\uuu'+index”

相反，您只需执行

ref=“category”

并像这样访问ref。$refs.category[0]

Vue.config.devtools=false；
Vue.config.productionTip=false；
var app=新的Vue({
el:“#应用程序”，
数据：{
arr:[1,2,3,4,5]
},
方法：{
测试（）{
console.log（此.$refs.category）；
console.log（此.$refs.category[0]）；
}
}
})

{{nbr}}
测验

问题出在这里（也许它会帮助其他人）：

对ref-category（

console.log（this.$refs.category）

）的调用得到了

undefined

，因为组件当时不可用，它稍后在DOM中呈现（毫秒）。所以，$nextTick（）完成了任务

    async handleSelectModelAutomat(item) {
      var response         = await this.post("info/get", {IdModel: item}); 
      this.Object.Products = response.Result; 

      await this.$nextTick() 
      console.log(this.$refs.category_0) }

---

您需要显示如何以及在何处执行控制台日志…@Eggon

async handleselectmodelsautomat（item）{var response=wait this.post（“info/get”，{IdModel:item}）this.Object.Products=response.Result console.log（this.$refs）console.log（this.$refs.category_0）}

Hi@victorvacarescu，能否更新问题，使您在组件中使用的代码更准确？很难让w/o仔细查看您的代码。您以前也曾尝试过，但仍然在v-on处理程序（Promise/async）中遇到错误：“TypeError:无法读取未定义的属性“0”。我相信这是一个不同的问题。。。

    async handleSelectModelAutomat(item) {
      var response         = await this.post("info/get", {IdModel: item}); 
      this.Object.Products = response.Result; 

      await this.$nextTick() 
      console.log(this.$refs.category_0) }