Question

我有一个带有两个选项的下拉列表：“ True”和“ False”，选择后，我希望表单将所选值保存为布尔值。

因此，如果我在用户选择“ True”时检查表单值，我希望该值是true作为布尔值。

<select v-model="selected">
  <option :value="null">Pick a value</option>
  <option v-for="val in options">{{val}}</option>
</select>

...

data() {
 return {
  selected: null,
   options: ["true", "false"]
}

这是我正在尝试的东西： https://jsfiddle.net/q0nk9h32/5/

如何以布尔值形式输出所选值？

奖金问题：要做的事不是有效的语法/良好做法，而不是使用options变量：

v-for="val in ["true", "false"]"吗？

为此设置一个变量似乎有些矫kill过正（但是当我尝试直接使用数组时，它会摆弄失败）。谢谢！

Answer 1

您可以使用<option>将值绑定到每个:value。

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

new Vue({
    el: '#app',
    data() {
        return {
            selected: null
        }
    }
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <select v-model="selected">
        <option :value="null">Pick a value</option>
        <option v-for="val in [true, false]" :value="val">{{val}}!!!</option>
    </select>
    <p>
        Selected is the {{ typeof selected }}: {{ selected }}
    </p>
</div>

如果需要，可以为v-for内联写入数组。在您的原始示例中，此操作不起作用，因为您在字符串周围加上了双引号，但已在属性周围使用了双引号。

对于这些值，您有很多选择将文本呈现为True和False ...

如果您只有两个值true和false，我倾向于将v-for放在一起，并分别编写。

<option :value="null">Pick a value</option>
<option :value="true">True</option>
<option :value="false">False</option>

格式化文本的另一种方法是使用过滤器或方法。就是这样：

<option v-for="val in [true, false]" :value="val">{{ val | filter }}</option>

或

<option v-for="val in [true, false]" :value="val">{{ method(val) }}</option>

对于过滤器，您可以在组件的filters部分中对其进行定义，对于方法，可以在methods中进行定义。无论哪种方式，该函数只需要将布尔值转换为字符串，然后将首字母大写即可。

// Obviously you wouldn't call it 'method'...
method (value) {
    const str = String(value);
    return str.charAt(0).toUpperCase() + str.slice(1);
}

也就是说，考虑到只有两种可能的选择，还有各种其他方式可以实现。例如：

<option v-for="val in [true, false]" :value="val">{{ val ? 'True' : 'False' }}</option>

Answer 2

一个选择是创建一个仅返回this.selected ==='true'的计算属性。

VueJs将布尔值绑定到下拉列表

2 个答案: