vue.js loop option value in object

Question

i have the object like this;

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

And code in vuejs like this

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

and what i get from this tag it's like this

and what i want to ask is how can i get the value as the id of each option. like a when i select Mango and the value is 003. if you know how to solve this please help me. thank you.

This could be helpful for you: stackoverflow.com/questions/50982408/… — Alexander Elert
– Alexander Elert, Commented Feb 18, 2020 at 10:20

Pallav Chanana · Accepted Answer · 2020-02-18 10:43:20Z

For Your Solution use this -

<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>

My advice use vuetify (v-select)component with vue for better performance.

<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>

I Hope it will help!

Adrian A · Accepted Answer · 2020-02-18 10:44:26Z

0

add a v-model to your select and that is it:

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

now selectedItem will contain the value of the fruit, working example : https://codesandbox.io/s/fruit-select-vs709

answered Feb 18, 2020 at 10:44

Adrian A

4502 silver badges9 bronze badges

2 Comments

Suab Nkauj Hmoob Over a year ago

hi dear, thank you i have got it. you are so helpful

Mike Willis Jun 6 at 18:24

the codesandbox is not using a v-for loop to render the options, they are hardcoded one by one. I tested with a non-hardcoded list of options and it fails, so unfortunately it looks like this answer doesn't work

Collectives™ on Stack Overflow

vue.js loop option value in object

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related