Vuejs2 当选项具有值属性时，使用vue 2从选择元素获取文本

我在vue组件中有一个select元素，如下所示：

<template>
    <select v-model="item.value" >
        <option value="1">A</option>
        <option value="2">B</option>
    </select>
    <div>
        You selected {{item.text}} with a value of {{item.value}}
    <div>
</template>
<script>
    export default {
        data() {
            return {
                item: {
                    text: '',
                    value: 0
                }
            }
        }
    }
</script>

A.
B
您选择了值为{{item.value}的{{item.text}}
导出默认值{
数据（）{
返回{
项目：{
文本：“”，
数值：0
}
}
}
}

如果我在a上选择，我得到的值是1，如果我在B上选择，我得到的值是2。因此，将填充item.value。如何填写item.text

---

如果我从选项中删除value属性，我会得到答案，但现在我的值不会被填充。

我建议使用一个对象数组，其中包含每个

的值和文本。比如说

data() {
  return {
    // ...
    options: [
      { value: 1, text: 'A' },
      { value: 2, text: 'B' }
    ]
  }
}

然后，您可以使用

v-for

来迭代此列表，并使用

v-model

<select v-model="item">
  <option v-for="opt in options" :key="opt.value" :value="opt">
    {{opt.text}}
  </option>
</select>

{{opt.text}

---

请看

这是一个非常奇怪的解决方法，我明白为什么会这样，每个选项上的value属性都会获取一个对象而不是值，当您选择一个模型时，它会选择该对象。我真的不喜欢这个，但至少它是有效的。谢谢