用 vue $refs 无法获取 id 的值？

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!