vuejs обращение к ref внутри v-for компонентов - PullRequest
Новая
       130

vuejs обращение к ref внутри v-for компонентов

0 голосов
/ 21 марта 2020

Некоторые компоненты отображаются из v-for l oop. Ссылки определяются следующим образом: :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), я получаю неопределенный . Любой другой определенный 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>

Ответы [ 2 ]

0 голосов
/ 23 марта 2020

Здесь была проблема (может, это поможет другим):

Вызов категории ref (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) }
0 голосов
/ 21 марта 2020

Когда вы присваиваете ссылки на v-for Vue вытянет все эти ссылки в массив. Таким образом, нет необходимости в :ref="'category_' + index".

Вместо этого вы можете просто сделать ref="category" и получить доступ к ссылке как этот 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://vuejs.org/v2/guide/components-edge-cases.html#Accessing -Child-Component-Instances-amp-Child-Elements

...