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

Question

<option v-for="{Service, Price} in delivery_array">
    {{Service}} - Rp {{Price}}
</option>

that's my option list from delivery_array

My delivery_array value:

[
    {"Price": "18000", "Service": "REG"},
    {"Price": "30000", "Service": "FAS"}
]

I want to add value attribute in every option element with JSON object like this:

{"Price": "THE_PRICE", "Service": "THE_SERVICE"}

So it looked like this:

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

But I have no idea how to code it like that.

I try it before with v-model attribute like v-model="Service", and I get the error message like this:

: v-model is not supported on this element type. If you are working with `contenteditable`, it's recommended to wrap a library dedicated for that purpose inside a custom component.

If I have a missing information or bad grammar in my question. I will edit it. Sorry for my bad english language.

Brother Woodrow · Accepted Answer · 2020-12-11 07:52:45Z

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>

answered Dec 11, 2020 at 7:52

Brother Woodrow

6,3923 gold badges22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Boussadjra Brahim Over a year ago

You could use destructing in v-for

Boussadjra Brahim · Accepted Answer · 2020-12-11 07:49:21Z

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='...

answered Dec 11, 2020 at 7:49

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

1 Comment

Dita Aji Pratama Over a year ago

Sorry, I need help again. The value become Like this: [object Object] How to get the object value from it? I use PHP on my backend.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related