Question

我在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上做出选择，则得到值1.我得到值2.因此将填充item.value。我如何填写item.text？

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

Answer 1

我建议使用包含每个<option>的值和文本的对象数组。例如

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>

请参阅https://vuejs.org/v2/guide/forms.html#Select-Options

当options具有value属性时，使用vue 2从select元素中获取文本

1 个答案: