Vue.js中使用select选择下拉框

在Vue.js中使用select选择下拉框有两种方法：

第一种：

Add.html:

<select v-model="sysNotice.noticeType" id="noticeType" class="form-control">
      <option disabled value="" selected>请选择</option>
      <option v-for="item in itemList" v-bind:value="item.macroId">
              {{ item.name }}
      </option>
</select>

Add.js:

var vm = new Vue({
el:'#dpLTE',
data: {
    itemList:[],  //define select control  list
    sysNotice: {
        noticeId: 0,
        status:0,
        noticeType: ''  //默认未空,则选择框会自动默认为请选择
    }
},
methods : {
       getNoticeTypeList: function() {
                   $.getJSON('../../sys/macro/value?value=noticetype', null, function(data){
                vm.itemList  = data;
            });
        },
       acceptClick: function() {
      
       if (!$('#form').Validform()) {
          return false;
        }

       if($("#noticeType option:selected").text()=="请选择"){
                    $("#noticeType").focus();
                    return false;
       }  

       $.SaveForm({
            url: '../../notice/save?_' + $.now(),
            param: vm.sysNotice,
            success: function(data) {
                    $.currentIframe().vm.load();
            }
      });
},
created: function() {
        this.getNoticeTypeList(); 
    }
})

Edit.html:

<select  v-model="sysNotice.noticeType"  id="noticeType" class="form-control">
      <option disabled value="">请选择</option>
      <option v-for="item in itemList" v-bind:value="item.macroId">
              {{ item.name }}
      </option>
</select>

Edit.js:

var vm = new Vue({
el:'#dpLTE',
data: {
     itemList:[],
     sysNotice: {
         noticeId: 0
     }
},
methods : {
   getNoticeTypeList: function() {
              $.ajax({
                       type:"GET",
                       url:"../../sys/macro/value?value=noticetype",
                       success:function(res){
                               vm.itemList=res;
                       }
               })
        },
        setForm: function() {
             vm. getNoticeTypeList();
             $.SetForm({
                url: '../../notice/info?_' + $.now(),
                param: vm.sysNotice.noticeId,
                success: function(data) {
                vm.sysNotice = data;
             }
       });
   },
   acceptClick: function() {
    if (!$('#form').Validform()) {
        return false;
    }                
 
    $.ConfirmForm({
            url: '../../notice/update?_' + $.now(),
            param: vm.sysNotice,
            success: function(data) {
                    $.currentIframe().vm.load();
            }
    });
})

但是这种方式，如果采用v-model="sysNotice.noticeType"绑定，经过测试在谷歌和IE11下基本可以正常回显出来，在Edge下基本上不能回显，但是提交的时候，select是有值的，所以这里可以不进行绑定：

<select id="noticeType" class="form-control">
      <option disabled value="">请选择</option>
      <option v-for="item in itemList" v-bind:value="item.macroId">
              {{ item.name }}
      </option>
</select>

在edit页面提交的时候：

acceptClick: function() {
    if (!$('#form').Validform()) {
        return false;
    }                
    vm.sysNotice.noticeType=$(".noticeTypeSelect").val();  //在这里设置一下就可以了
 
    $.ConfirmForm({
            url: '../../notice/update?_' + $.now(),
            param: vm.sysNotice,
            success: function(data) {
                    $.currentIframe().vm.load();
            }
    });

第二种方法：

Add.html:

<select  class="form-control noticeTypeSelect"  v-model="sysNotice.noticeType"  isvalid="yes" checkexpession="NotNull"></select>

Add.js:

var vm = new Vue({
el:'#dpLTE',
   data: {
      itemList:[],  //define select control  list
      sysNotice: {
          noticeId: 0,
          status:0,
          noticeType: ''  //默认未空,则选择框会自动默认为请选择
      }
},
methods : {
        getNoticeTypeList: function() {
                $('.noticeTypeSelect').selectBindEx({
                url: '../../sys/macro/value?value=noticetype',
                placeholder: '请选择',
                value: 'macroId',4
                text: 'name',
                selected:''
            });
         },
        acceptClick: function() {
        if (!$('#form').Validform()) {
            return false;
         }
        if($("#noticeType option:selected").text()=="请选择"){
            $("#noticeType").focus();
                return false;
            }
           
         $.SaveForm({
            url: '../../notice/save?_' + $.now(),
            param: vm.sysNotice,
            success: function(data) {
                    $.currentIframe().vm.load();
            }
         });
      }
   },
   created: function() {
        this.getNoticeTypeList();
   }
})

 Edit.html:

<select  class="form-control noticeTypeSelect"  v-model="sysNotice.noticeType"   id="noticeType"  isvalid="yes" checkexpession="NotNull"></select>

Edit.js:

var vm = new Vue({
el:'#dpLTE',
data: {
    sysNotice: {
        noticeId: 0
     }
},
methods : {
     getNoticeTypeList: function() {
            $('.noticeTypeSelect').selectBindEx({
                url: '../../sys/macro/value?value=noticetype',
                placeholder: '请选择',
                value: 'macroId',
                text: 'name',
                selected:vm.sysNotice.noticeType   //注意这里，select自动回显设置
            });
        },
        setForm: function() {
           $.SetForm({
              url: '../../notice/info?_' + $.now(),
              param: vm.sysNotice.noticeId,
              success: function(data) {
                    vm.sysNotice = data;
                    vm.getNoticeTypeList();
             }
         });
       },
       acceptClick: function() {
       if (!$('#form').Validform()) {
           return false;
       }    
            
       vm.sysNotice.noticeType=$(".noticeTypeSelect").val(); //这里设置一下即可;
       //alert($(".noticeTypeSelect").val());
       $.ConfirmForm({
            url: '../../notice/update?_' + $.now(),
            param: vm.sysNotice,
            success: function(data) {
                    $.currentIframe().vm.load();
            }
        });
     }
    }
})