vue三级联动

qq_42543358 2018-10-15 08:03:55

vue写这样的城市三级联动，通过area的index获取了所有省，怎么获取里面的市和区

...全文

288 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

业余草 2018-10-17

打赏
举报

天际的海浪 2018-10-16

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div class="box">
	<select v-model="province" @change="city=0;district=0">
		<option v-for="(obj,index) in area" :value="index">{{ obj.name }}</option>
	</select>
	<select v-model="city" @change="district=0">
		<option v-for="(obj,index) in cityObj.city" :value="index">{{ obj.name }}</option>
	</select>
	<select v-model="district">
		<option v-for="(name,index) in districtObj.district" :value="index">{{ name }}</option>
	</select>
	<p>{{ address }}</p>
</div>

<script type="text/javascript">
var dsy = [
	{ name:"北京市", city: [
		{ name:"北京全市", district: ["东城区","西城区","崇文区","宣武区","朝阳区","丰台区"] }
	]},
	{ name:"河北省", city: [
		{ name: "石家庄市", district: ["长安区","桥东区","桥西区"] },
		{ name: "张家口市", district: ["下花园区","宣化县"] },
		{ name: "承德市", district: ["双桥区","双滦区","鹰手营子矿区","承德县"] }
	]}
];

var vm = new Vue({
	el: '.box',
	data: {
		province: 0,
		city: 0,
		district: 0,
		area: dsy
	},
	computed: {
		cityObj: function () {
			return this.area[this.province];
    	},
		districtObj: function () {
			return this.cityObj.city[this.city];
    	},
		address: function () {
			return this.cityObj.name
				+ this.districtObj.name
				+ this.districtObj.district[this.district];
		}
	}
});
</script>

</body>
</html>

qq_42543358 2018-10-15