我有一个带有两个选项的下拉列表:"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"]"
?
有一个变量来处理这个问题似乎有点夸张(但当我尝试直接使用数组时,它会失败)。谢谢!
发布于 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>
发布于 2019-06-12 03:34:41
一种选择是创建一个只返回this.selected === 'true‘的计算属性。
https://stackoverflow.com/questions/56550469
复制相似问题