JavaScript - 使用 Vue.js 验证下拉列表

Question

>我需要使用 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...

Answer 1

由于与 SELECT 元素关联的模型是notificationPreference，因此您需要计算模型变量：

if (!this.notificationPreference){ // is null or zero
alert("Please select a service");
}

有关详细信息，请参阅 https://v2.vuejs.org/v2/cookbook/form-validation.html

Answer 2

你可以用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;
}
}
}
});