Vue二级联动,请大家解答一下

Question

//省份
provinceList: [
{ "id": "广东省", "txt": "广东省" },
{ "id": "山西省", "txt": "山西省" }
]
// 城市
cityList: [
{ "id": "", "txt": "请选择", "pid": "广东省" },
{ "id": "广州", "txt": "广州", "pid": "广东省" },
{ "id": "深圳", "txt": "深圳", "pid": "广东省" },
{ "id": "东莞", "txt": "东莞", "pid": "广东省" },
{ "id": "佛山", "txt": "佛山", "pid": "广东省" },
{ "id": "中山", "txt": "中山", "pid": "广东省" },
{ "id": "珠海", "txt": "珠海", "pid": "广东省" },
{ "id": "", "txt": "请选择", "pid": "山西省" },
{ "id": "太原", "txt": "太原", "pid": "山西省" },
{ "id": "大同", "txt": "大同", "pid": "山西省" },
{ "id": "阳泉", "txt": "阳泉", "pid": "山西省" },
{ "id": "吕梁", "txt": "吕梁", "pid": "山西省" }
]

Answer 1

题主要的代码如下

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
    省份：<select @change="setCity">
        <option v-for="pro in provinceList" :value="pro.id">{{pro.txt}}</option>
    </select>
    　城市：<select>
            <option v-for="city in citys" :value="city.id">{{city.txt}}</option>
    </select>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            provinceList: [
                { "id": "广东省", "txt": "广东省" },
                { "id": "山西省", "txt": "山西省" }
            ]
            , cityList: [
                { "id": "", "txt": "请选择", "pid": "广东省" },
                { "id": "广州", "txt": "广州", "pid": "广东省" },
                { "id": "深圳", "txt": "深圳", "pid": "广东省" },
                { "id": "东莞", "txt": "东莞", "pid": "广东省" },
                { "id": "佛山", "txt": "佛山", "pid": "广东省" },
                { "id": "中山", "txt": "中山", "pid": "广东省" },
                { "id": "珠海", "txt": "珠海", "pid": "广东省" },
                { "id": "", "txt": "请选择", "pid": "山西省" },
                { "id": "太原", "txt": "太原", "pid": "山西省" },
                { "id": "大同", "txt": "大同", "pid": "山西省" },
                { "id": "阳泉", "txt": "阳泉", "pid": "山西省" },
                { "id": "吕梁", "txt": "吕梁", "pid": "山西省" }
            ],
            citys:[]
        },
        created() {
            this.citys = this.cityList.filter(i => i.pid == '广东省');
        },
        methods: {
            setCity(e) {
                console.log(e)
                this.citys = this.cityList.filter(i => i.pid == e.target.value);
            }
        }
    });
</script>