如何在变量的 v-for 循环中获取 :key 值？

Question

在 Vuejs 中，我如何获取 :key 值，它在下拉列表中存储来自 v-for 循环的值。我正在尝试获取下拉列表的 ID 和名称。我可以使用 @change>event.target.value 获取名称，但是否有可能获取键值？

谢谢

<select @change="checkFirst($event)" v-model="firstDropdownValue">
   <option value="none" selected="selected"> Select one...</option>
   <option 
      v-for="data in getCategoriesDetail" 
      :key="data.id" :
      :value="data.name">{{data.name}}</option>
</select>

Answer 1

您可以简单地使用您在 select 中使用的 v-model ！您应该在 :value 中使用整个对象，而不仅仅是名称 :value="data"，然后在模板中将其用作 firstDropdownValue.name

new Vue({
  el: "#app",
  data: () => ({
    firstDropdownValue: null,
    getCategoriesDetail: [
      {id:1, name: "foo"},
      {id:2, name: "bar"},
      {id:3, name: "baz"},
    ]
  }),
  
  methods: {
    checkFirst(){
      console.log(this.firstDropdownValue)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select @change="checkFirst" v-model="firstDropdownValue">
    <option value="none" selected="selected"> Select one...</option>
    <option 
    v-for="data in getCategoriesDetail" 
    :key="data.id"
    :value="data"
    >{{data.name}}</option>
  </select>
  
  Selected value : {{firstDropdownValue && firstDropdownValue.name}}
</div>

Answer 2

据我了解，您想从下拉列表中获取所选选项的 :key 的值 data.id。如果是，您可以使用 v-model 获取整个对象而不仅仅是名称，然后您可以在脚本中过滤出您想要的属性。

演示 :

new Vue({
  el: '#app',
  data: {
    getCategoriesDetail: [{
        id: 1,
      name: 'Option 1'
    }, {
        id: 2,
      name: 'Option 2'
    }, {
        id: 3,
      name: 'Option 3'
    }, {
        id: 4,
      name: 'Option 4'
    }],
    firstDropdownValue: 'none'
  },
  methods: {
    checkFirst() {
        console.log('id : ' + this.firstDropdownValue.id)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select @change="checkFirst" v-model="firstDropdownValue">
    <option value="none">Select one...</option>
    <option 
            v-for="item in getCategoriesDetail" 
            :key="item.id"
            :value="item">{{ item.name }}</option>
  </select>
</div>

如何在变量的 v-for 循环中获取 :key 值？

How can i get :key value in v-for loop in a variable?

vue.js