vue省市區三級聯動

<div id="app1">
            <select v-model="selected"  >
           
                <option v-for="option in options"> {{option.text}} </option>
            </select> 
         
            <select v-model="selecteds" > 
            
                <option v-for="v in list">{{v.text}} </option>
            </select>
              <select v-model="selectedss"> 
               
                <option v-for="n in lists">{{n.text}} </option>
            </select>
             </div>
<script>
 new Vue({
    el: '#app1',
    data: {
       selected:'浙江',
	    selecteds:'杭州',
		selectedss:'西湖區',
	   
	 options: [
         { text: '浙江', value: [{text:'杭州',value:[ {text:'西湖區'},{text:'餘杭區'},{text:'拱墅區'}]},{text:'寧波'},{text:'溫州'},{text:'台州'},{text:'紹興'}]},
         { text: '江西'},
         { text: '福建'},
       ]
    },
  
    computed: {
        list: function () {
            for(var i in this.options){
                // console.log(this.options[i].text)
                if(this.options[i].text == this.selected){
                    console.log(this.options[i].value)
                    return this.options[i].value
                }
				
            }
	   
        },
		 lists: function () {
            for(var i in this.list){
               
                if(this.list[i].text==this.selecteds){
                  
                    return this.list[i].value
                }
				
				
            }
	   
        }
    }
  })

</script>
相關文章
相關標籤/搜索