VueJs将布尔值绑定到dropdown
我有一个带有两个选项的下拉列表："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"]"？
有一个变量来处理这个问题似乎有点夸张(但当我尝试直接使用数组时，它会失败)。谢谢!
回答 2
Stack Overflow用户
发布于 2019-06-12 03:28:50
您可以使用: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>Stack Overflow用户
发布于 2019-06-12 03:34:41
一种选择是创建一个只返回this.selected === 'true‘的计算属性。
https://stackoverflow.com/questions/56550469
复制相似问题
腾讯云开发者
