vuejs 三級聯動

最近在學習vuejs，寫了一個城市三級聯動效果，可以用在項目中的收獲地址管理，支持新增與修改操作

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="demo">
	<address 
	:province="province" 
	:city="city" 
	:county="county" 
	></address>
</div>
<script type="x/template" id="address-template">
	<div>
		<select v-model='province'>
			<option value="">請選擇</option>
			<option v-for="item in provinces" value="{{item}}">{{item}}</option>
		</select>
		<select v-model='city'>
			<option value="">請選擇</option>
			<option v-for="item in citys" value="{{item}}">{{item}}</option>
		</select>
		<select v-model='county'>
			<option value="">請選擇</option>
			<option v-for="item in countys" value="{{item}}">{{item}}</option>
		</select>
	</div>
</script>

JavaScript

var addressExtend=Vue.extend({
	template:"#address-template",
	props:{
		province:{
			type:String,
			default:''
		},
		city:{
			type:String,
			default:''
		},
		county:{
			type:String,
			default:''
		}
	},
	data:function(){
		return {
			addressData:null
		}
	},
	init:function(){
		var that=this
		setTimeout(function(){
			that.addressData={
				'湖南':{
					'長沙':{
						"開福區":{},
						"岳麓區":{}
					},
					'懷化':{
						'沅陵':{},
						'漵浦':{}
					}
				},
				'廣東':{
					'廣州':{
						'天河區':{},
						'越秀區':{}
					},
					'深圳':{
						'寶安':{},
						'南山':{}
					}
				}
			}
		},1000)
	},
	watch:{
		province:function(val,oldval){
			if(val!==oldval){
				this.city=''
			}
		},
		city:function(val,oldval){
			if(val!==oldval){
				this.county=''
			}
		}
	},
	computed:{
		provinces:function(){
			if(!this.addressData)return

			var c=[]
			for(var key in this.addressData){
				c.push(key)
			}

			return c
		},
		citys:function(){
			if(!this.addressData 
				|| !this.province)
				return 

			var c=[]
			for(var key in this.addressData[this.province]){
				c.push(key)
			}

			return c
		},
		countys:function(){
			if(!this.addressData
				||!this.city)
				return

			var c=[]
			for(var key in this.addressData[this.province][this.city]){
				c.push(key)
			}

			return c
		}
	}
})

Vue.component('address',addressExtend)

var demo1=new Vue({
	el:'#demo',
	data:{
		province:'廣東',
		city:'廣州',
		county:'天河區'
	}
})

去jsfiddle手動試試
此文同步發表於Segmentfault