javascript - 如果 v-bind: 值是对象，则选择选项

Question

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

但是，它没有选择任何东西，没有工作。

标签： javascriptvue.js

Answer 1

您可以使用此代码。因为您需要将 id 作为选择字段中可见的选择值传递。

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

如果你想传递对象。开始了。

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