先上代码，后面有说明
- html
<select v-model="selectedProvince" class="itxt" name="loginname" tabindex="1"
style="width:120px;border: 1px solid #bdbdbd;height:38px;line-height:38px;">
<option disabled selected="selected" :value="{code:-1}">省/市</option>
<template v-for="province in provinceList">
<option :value="{code:province.id,name:province.nameCn}">{{province.nameCn}}
</option>
</template>
</select>
<select v-model="selectedCity" class="itxt" name="loginname" tabindex="1"
style="width:120px;border: 1px solid #bdbdbd;float:right;height:38px;line-height:38px;">
<option disabled selected="selected" :value="{code:-1}">市/区</option>
<template v-for="city in cityList">
<option :value="{code:city.id,name:city.nameCn,level:city.level}">
{{city.nameCn}}
</option>
</template>
</select>
<select v-model="selectedDealer" class="itxt" name="loginname" tabindex="1"
style="width:100%;float:right;height:38px;line-height:38px;">
<option disabled selected="selected" :value="{code:-1}">请选择</option>
<template v-for="dealer in dealerList">
<option :value="{code:dealer.dealerCode,name:dealer.nameCn,addressCn:dealer.addressCn}">
{{dealer.nameCn}}
</option>
</template>
</select>
- js
var vm = new Vue({
el: '#orderInfo',
data: {
orderInfo: {
consignee: '',
idCard: '',
province: '',
provinceCode: '',
city: '',
cityCode: '',
dealerCode: '',
dealerName: ''
},
selectedDealer: {code: -1},
selectedProvince: {code: -1},
selectedCity: {code: -1},
provinceList: [],
cityList: [],
dealerList: []
},
methods: {
submitOrder: function () {
var _self = this;
_self.orderInfo.provinceCode = _self.selectedProvince.code;
_self.orderInfo.province = _self.selectedProvince.name;
_self.orderInfo.cityCode = _self.selectedCity.code;
_self.orderInfo.city = _self.selectedCity.name;
_self.orderInfo.dealerCode = _self.selectedDealer.code;
_self.orderInfo.dealerName = _self.selectedDealer.name;
this.$http.post("/v1/api/order", _self.orderInfo).then(function (res) {
alert(res.body.message);
if (res.body.success) {
location.href = '/pay/index?orderSn=' + res.body.data.orderSn;
}
}, this.httpError);
}
},
watch: {
selectedProvince: function (newVal, oldVal) {
var _self = this;
if (newVal && typeof newVal != "undefined") {
$.get("/v1/api/dealer/city/" + newVal.code, function (data) {
_self.cityList = data;
_self.selectedCity = {code: -1};
});
}
},
selectedCity: function (newVal, oldVal) {
var _self = this;
if (newVal && typeof newVal != "undefined" && newVal.code != -1) {
$.get("/v1/api/dealer/" + newVal.code + "?level=" + newVal.level, function (data) {
_self.dealerList = data;
})
}
_self.selectedDealer = {code: -1};
}
},
created: function () {
var _self = this;
$.ajax({
url: '/v1/api/dealer/province',
type: "GET",
dataType: 'json',
async: false,
contentType: "application/json; charset=utf-8",
success: function (res) {
_self.provinceList = res;
}
});
}
})
以上是省，市，经销商的三级联动
注意点主要：
- create方法中的ajax调用是同步方法，异步调用页面加载后省的数据可能还没请求回来
- $.get()，$.post()方式调用接口要引用
vue-resource.js - v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
- 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
<option disabled selected="selected" :value="{code:-1}">省/市</option> - 表单的value值可以绑定对象
<option :value="{code:dealer.dealerCode,name:dealer.nameCn,addressCn:dealer.addressCn}">
