When implementing the secondary linkage of provinces and cities, if the province and city are written in an array object. You can judge whether the id of the target province is the same when clicking on a certain province.
iViewon-change event in
on-change event: This is triggered when the selected Option changes, and the default value is returned. (value only supports String and Number types)
1. HTML part
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
<FormItem prop="province" label="province">
<Select v-model="" placeholder="Please select a city" @on-change="change">
<Option v-for="item in provinceArr" :key="" :value="" >{{ }}</Option>
</Select>
</FormItem>
<FormItem prop="city" label="City">
<Select v-model="" placeholder="Please select a province">
<Option v-for="item in cities" :key="" :value="" >{{ }}</Option>
</Select>
</FormItem>
</Form>
</template>
2. The main parts of JS
<script>
export default{
data(){
return {
provinceArr: [
{
id:1,
name:"Beijing",
cities:[{id:11,
name:"Beijing"}]
},
{
id:2,
name:"Tianjin City",
cities:[{id:12,
name:"Tianjin City"} ]
},
{
id:3,
name:"Shanghai",
cities:[ {id:13,
name:"Shanghai"} ]
}
],
cities: "",
formValidate:...,
ruleValidate:...
}
},
methods:{
change(val){
for(var i=0; i<; i++){
if(val == [i].id ){
= [i].cities;
}
}
}
}
}
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.