我需要使用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来做到这一点。
发布于 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
发布于 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;
}
}
}
});
https://stackoverflow.com/questions/50616408
复制相似问题