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

【问题标题】：VueJs bind boolean values to dropdownVueJs 将布尔值绑定到下拉列表
【发布时间】：2019-10-26 06:36:40
【问题描述】：

我有两个选项的下拉目：“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"]" ?

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

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>

【讨论】：

谢谢！我在这里唯一的问题是，在向用户显示它时，我需要将“True”和“False”作为字符串，因为我分别需要大写 T 和 F。有什么建议？是的，我只是举了一个小例子来看看它是如何工作的。如果只是真/假，则不需要v-for

【解决方案2】：

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

【讨论】：