vue.js how to get the value of the custom element attribute parameters?

Question

In the use of vue.js, on the definition of attribute id number how to get it? I want to $refs read id="20" value. I hope console.log is 21,10,15 . go to the jsfiddle

Look at:

var app = new Vue({
  el: "#app",
  data: {
    fruit: [{
      id: 21,
      name: 'Peach'
    }, {
      id: 10,
      name: 'Apple'
    }, {
      id: 15,
      name: 'Lemon'
    }],
    branid: ''
  },
  mounted() {
    console.log(this.$refs)
  }
})

<div id="app">
  <ul>
    <li v-for="item in fruit" :id="item.id" ref="branid">{{item.name}}</li>
  </ul>
</div>

Answer 1

您应该能够简单地引用branid键并从每个li项目中提取id ，请参见此处更新的小提琴 ：

console.log(this.$refs.branid.map(li => li.id))

Answer 2

you don't need to get it through this.$refs, it is in your fruit array so you can easily get it by using map or filter function:

Example:

mounted() {
    var ids = this.fruit.map(function(obj) {
     return obj.id;
    });
    console.log(ids)
}