對象中的 vue.js 循環選項值

Question

我有這樣的對象；

fluit:[
    {id:'001', name:"Apple"},
    {id:'002', name:"Banana"},
    {id:'003', name:"Mango"},
    {id:'004', name:"orange"},
    {id:'005', name:"papaya"},
  ]

和 vuejs 這樣的代碼

<select >
  <option v-for="(item, index) in fluit" :key="index" :value="item.id" id="select"{{item.name</option>
</select>

我從這個標簽中得到的是這樣的

我想問的是如何獲得作為每個選項的 id 的值。 就像當我選擇Mango並且值為003 時。 如果你知道如何解決這個問題，請幫助我。 謝謝你。

Answer 1

對於您的解決方案，請使用此 -

<template>
    <select name="itemType" v-model="itemType" @change="onChange()" class="form-control">
         <option value="001">Apple</option>
         <option value="002">Banana</option>
    </select>
</template>

<script>
export default {
    data() {
        return {
            itemType: '',
        }
    },

    methods: {
        onChange() {
            console.log('The new value is: ', this.itemType)
        }
    }
}
</script>

我的建議是使用 vuetify (v-select) 組件和 vue 以獲得更好的性能。

<template>
     <v-select
        v-model="select"
        :items="fluit"
        item-text="id"
        item-value="name"
        label="Select"
        @input="doSomething"
        return-object/>
</template>

<script>
  export default {
    data () {
      return {
        select: { id:'005', name:"papaya" },
        items: [
           {id:'001', name:"Apple"},
           {id:'002', name:"Banana"},
           {id:'003', name:"Mango"},
           {id:'004', name:"orange"},
           {id:'005', name:"papaya"},
        ],
      }
method:{
      doSomething(){
       console.log(this.select)
      }
    }

    },
  }
</script>

我希望它會有所幫助！

Answer 2

將 v-model 添加到您的選擇中，就是這樣：

<select v-model="selectedItem">
  <option v-for="(item, index) in fluit" :key="index" :value="item.id" id="select"> 
   {{item.name}}
  </option>
</select>

現在 selectedItem 將包含水果的值，工作示例： https : //codesandbox.io/s/fruit-select-vs709