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

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

---

但是，我不知道如何使用Vue.js实现这一点…

因为与SELECT元素关联的模型是

notificationPreference

，您需要计算模型变量：

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

有关更多信息，请参见

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

电子邮件
短信
电子邮件和文本
var vm=新的Vue({
数据：{
通知首选项：“”
},
观察：{
通知首选项：函数（val）{
如果（val==0）{
警报（“请选择一项服务”）；
e、 预防默认值（）；
返回false；
}
}
}
});

<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;
           }
       }
   }
});