Can not get the value of id with vue $refs?

Question

I see the about vue $ refs document, the console to see is {}, I do not know how to get the value of id? There { } is no object, how to get $ refs id of value,but I think this {} not get to object.I try to use console.log(this.$refs.dataInfo.id) is undefined.

Look at the picture：

javascript file:

console.log(this.$refs)

HTML file:

<tab-item v-for="item in category" :id="item.id" ref="dataInfo">{{item.name}}</tab-item>

Answer 1

console.log(this.$refs.dataInfo.id) is undefined because you are trying to access an element's attribute through a reference to a component. Based on your example object, you can access it like this: this.$refs.dataInfo[0]['$el'].id

That's an odd way of doing it, I believe. The Vue way of doing it would be:

1. Using events. When props change in the child component and you want to do something about it in the parent component, you should emit a custom event. You'd do something like this in the child component: this.$emit('dataChange', data). And in the parent component add an event listener @dataChange="myMethod" to the component.
2. Using Vuex.

Having a good understanding of the basic concepts such as how the data flows in the application is a must and should not be overlooked!