JavaScript -使用Vue.js验证下拉菜单
JavaScript -使用Vue.js验证下拉菜单
提问于 2018-05-31 11:55:32
我需要使用Vue.Js验证一个下拉列表。这是下拉列表
<select name="notificationPreference" id="notificationPreference" v-model="notificationPreference">
<option value hidden></option>
<option value="1">Email</option>
<option value="2">Text Message</option>
<option value="3">Email and Text</option>
</select> </td> </tr>我已经可以使用Javascript来完成这项工作，如下所示
var e = document.getElementById("notificationPreference");
var strUser = e.options[e.selectedIndex].value;
if(strUser==0)
{
alert("Please select a service");
e.preventDefault();
return false;
}然而，我不知道如何使用Vue.js来做到这一点。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-31 12:06:29
由于与SELECT元素关联的模型是notificationPreference，因此您需要计算模型变量：
if (!this.notificationPreference){ // is null or zero
alert("Please select a service");
}有关更多信息，请参阅https://vuejs.org/v2/cookbook/form-validation.html
Stack Overflow用户
发布于 2018-05-31 12:09:18
你可以用watch来做到这一点:希望这能有所帮助。
<div id="app">
<select name="notificationPreference" v-model="notificationPreference">
<option value hidden></option>
<option value="1">Email</option>
<option value="2">Text Message</option>
<option value="3">Email and Text</option>
</select> </td> </tr>
</div>
var vm = new Vue({
data:{
notificationPreference:''
},
watch:{
notificationPreference: function (val) {
if(val == 0){
alert("Please select a service");
e.preventDefault();
return false;
}
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50616408
复制相关文章
相似问题