三级联动vue实现

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	<style type="text/css">
		.div1 {
			width: 150px;
			height: 30px;
			line-height: 30px;
		}
	</style>
</head>

<body>
	<div id="example">
		<select class="div1" v-model="prov">
			<option v-for="option in arr" :value="option.name">
				{{ option.name }}
			</option>
		</select>
		<select class="div1" v-model="city">
			<option v-for="option in cityArr" :value="option.name">
				{{ option.name }}
			</option>
		</select>
		<select class="div1" v-model="district" v-if="district">
			<option v-for="option in districtArr" :value="option.name">
				{{ option.name }}
			</option>
		</select>
	</div>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/items.js"></script>
	<script>
		var vm = new Vue({
			el: '#example',
			data: {
				arr: arrAll,
				prov: '厨房',
				city: '电路',
				district: '灯具',
				cityArr: [],
				districtArr: []
			},
			methods: {
				updateCity: function () {
					for (var i in this.arr) {
						var obj = this.arr[i];
						if (obj.name == this.prov) {
							this.cityArr = obj.sub;
							break;
						}
					}
					this.city = this.cityArr[1].name;
				},
				updateDistrict: function () {
					for (var i in this.cityArr) {
						var obj = this.cityArr[i];
						if (obj.name == this.city) {
							this.districtArr = obj.sub;
							break;
						}
					}
					if (this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
						this.district = this.districtArr[1].name;
					} else {
						this.district = '';
					}
				}
			},
			beforeMount: function () {
				this.updateCity();
				this.updateDistrict();
			},
			watch: {
				prov: function () {
					this.updateCity();
					this.updateDistrict();
				},
				city: function () {
					this.updateDistrict();
				}
			}
		})
	</script>
</body>

</html>
var arrAll =
		[
			{name: "选择项目", sub: [{name: "请选择"}], type: 1},
			{
				name: "厨房",
				sub: [
					{name: "请选择", sub: []},
					{
						name: "电路",
						sub: [{name: "请选择"}, {name: "灯具"},{name: "电闸"},{name: "房屋停电"},{name: "开关"},{name: "排风扇"},{name: "插座"},{name: "线路"},],
						type: 0
					},{
						name: "电器",
						sub: [{name: "请选择"}, {name: "电磁炉"},{name: "油烟机"},{name: "热水器"},{name: "燃气灶"},{name: "微波炉"}],
						type: 0
					},{
						name: "家具",
						sub: [{name: "请选择"}, {name: "电热水壶"}],
						type: 0
					},{
						name: "家居",
						sub: [{name: "请选择"}, {name: "桌台"}],
						type: 0
					},{
						name: "疏通",
						sub: [{name: "请选择"}, {name: "地漏疏通"},{name: "洗池疏通"},{name: "管道疏通"}],
						type: 0
					},{
						name: "水暖",
						sub: [{name: "请选择"}, {name: "闸门"},{name: "水龙头"},{name: "水管"},{name: "主管道"},{name: "暖气"}],
						type: 0
					},{
						name: "锁类",
						sub: [{name: "请选择"}, {name: "机械锁"},{name: "门锁"}],
						type: 0
					},{
						name: "主体",
						sub: [{name: "请选择"}, {name: "窗户"}],
						type: 0
					},
				], type: 1
			},
			{
				name: "客厅",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "客厅卫生间",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "客厅阳台",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "卧室",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "卧室阳台",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "卧室卫生间",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
		]