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>

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>

• javascript
• vue.js
• vuejs2

• 1 for one, it's all in {}.branid not just {} as you can see in the object tree, it starts off with {} but the item is branid which contains another item, id. – user4616966 Commented Jan 21, 2018 at 5:13

1 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 ponent. 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 ponent and you want to do something about it in the parent ponent, you should emit a custom event. You'd do something like this in the child ponent: this.$emit('dataChange', data). And in the parent ponent add an event listener @dataChange="myMethod" to the ponent.
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!