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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (510)

我有一个带有两个选项的下拉列表:“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"]" ?

为此设置一个变量似乎有些过分(但是当我尝试直接使用数组时它会失败)。谢谢!

提问于
用户回答回答于

您可以将值绑定到每个<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内联编写数组。在您的原始示例中,它没有用,因为您的字符串周围包含双引号,但同时已在该属性周围使用双引号。

你有很多选项来渲染文本TrueFalse这些值......

如果你只有两个值,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>
用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券