[Vuejs]-Vuejs v-for in option element for select input. Get the value from JSON object, and use it in option value

by

1👍

✅

The v-model should be in select element and the value in option :

<select v-model="delivery">
<option v-for="{Service, Price} in delivery_array" :value='{"service":Service, "price":Price }'>
    {{Service}} - Rp {{Price}}
</option>

</select>

delivery must be declared as data property, and value bound like :value='...

👤Boussadjra Brahim

2👍

The v-model goes on the select tag, since that holds the value for the selected option. You also need a key on the v-for.

I don’t know if you can use destructuring in the v-for directly, but this should work:

<select v-model="Service">
    <option v-for="item in delivery_array" :value="item.Service" :key="item.Service">
        {{ item.Service }} - Rp {{ item.Price }}
    </option>
</select>
👤Brother Woodrow

Leave a comment