Выбран вариант, если v-bind: значение - объект

Question

Я немного новичок ie в Vue, и у меня возникли проблемы с выбором опции из списка опций. Вот моя попытка:

<select v-model="selected" class="form-control form-control-sm" id="planp" size="4" @change="actualizaplan">
<option v-for="plan in planes" :selected="plan.id == '2'" v-bind:value="{ id: plan.id, precio: plan.precio, descuento: plan.descuento}" v-bind:key="plan.id">
</option>
</select>

Но ничего не выбрано, не работает.

Answer 1

Вы можете go с этим кодом. Поскольку вам нужно передать идентификатор в качестве значения для выбора, видимого в поле выбора.

<template>
 <select class="form-control" v-model="selected" required>
        <option selected>Choose Province</option>
        <option v-for="plan in plans" v-bind:value="plan.id" v-bind:key="plan.id" >{{ plan.plan }}</option>
    </select>

Selected Value
    {{selected}}
</template>

<script>
export default{
data: {
  selected:'2',
    plans: [
      {
      id:1,
      plan:'test',
      descuento:'test descuento'
      },
      {
      id:2,
      plan:'test',
      descuento:'test descuento'
      },
      {
      id:3,
      plan:'test',
      descuento:'test descuento'
      },
    ]
  }
}
</script>

https://jsfiddle.net/meetsohail/ngLzvtex/6/

Если вы хотите передать объект . Здесь мы go.

<select class="form-control" v-model="selected" required @change="value(selected)">
        <option selected>Choose Province</option>
        <option v-for="plan in plans" v-bind:value="{ id: plan.id, 
        plan: plan.plan,descuento:plan.descuento }" v-bind:key="plan.id" >{{ plan.plan }}</option>
    </select>
    {{selected.id}}
    {{selected.plan}}
    {{selected.descuento}}