javascript - VueJs 将 bool 值绑定(bind)到下拉列表

Question

我有一个包含两个选项的下拉列表:“True”和“False”，选择后，我希望表单将所选值保存为 bool 值。

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

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

这是我正在尝试的一个 fiddle : https://jsfiddle.net/q0nk9h32/5/

如何以 bool 形式输出所选值？

额外问题:除了使用 options 变量，它是否是有效的语法/良好实践:

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

为此使用一个变量似乎太过分了(但当我尝试直接使用数组时，它在 fiddle 中失败了)。谢谢!

Answer 1

您可以将值绑定(bind)到每个 <option>使用:value .

https://v2.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 中。无论哪种方式，该函数只需将 bool 值转换为字符串，然后将第一个字母大写即可。

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