vuejs accessing ref inside v-for components

Question

Have some components rendered from a v-for loop. The refs are defined like this: :ref="'category_' + index" This is how these refs appears in console at: 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

If I'm trying to acces like that: console.log(this.$refs.category_0), I get undefined. Any other defined ref (not called 'category_..') is working perfectly.

What seems to be wrong here?

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

Reluctance

You need to show how and where you do the console logs... – Idiographic

@Idiographic async handleSelectModelAutomat(item) { var response = await this.post("info/get", {IdModel: item}) this.Object.Products = response.Result console.log(this.$refs) console.log(this.$refs.category_0) } – Reluctance

Hi @victorvacarescu, could you update the question to have the code you're using in your component? It's hard to tell w/o a good look at your code. – Equivocal

Answer 1

When you assign refs on a v-for Vue will pull all those refs in an array. So there is no need for :ref="'category_' + index".

Instead you can just do ref="category" and access the ref like that 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>

When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source.

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

Violist

Have tried previously like you said, but still got an: [Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read property '0' of undefined". I believe is a different problem here... – Reluctance

Yup, got the same error here... – Dander

Answer 2

Here was the problem (maibe it will help others):

The call for ref category (console.log(this.$refs.category)) got undefined because component was unavailable at that time , it was rendered in the DOM later (matter of milliseconds). So, $nextTick() did the job.

    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) }

Reluctance