VueJS - 自动填充选定的下拉列表相关字段

Question

我在Province 和District、Province hasMany District 之间有Related data。

我有 Object 这样的东西。

{
        "id": 1,
        "name_eng": "Banteay Meanchey",
        "name_kh": "បន្ទាយមានជ័យ",
        "district": [
            {
                "id": 1,
                "name_eng": "Mongkol Borei",
                "name_kh": "មង្គលបុរី",
                "province": 1
            }
        ]
    },

我有类似于上面的图像，我想要的只是选择Province 987654330 District 987654331 @与相关关系。

在我使用Vuetifyv-autocomplete之间

    <label
        >Pls Select Province/District</label
    >
    <v-autocomplete
        :items="provinces"
        item-id="id"
        item-text="name_kh"
        label="Pls Select Province"
        solo
        v-model="form.province"
        return-object
    >
    </v-autocomplete>
    <v-autocomplete
        :items="provinces"
        item-id="id"
        item-text="name_kh"
        label="Pls Select District"
        solo
        v-model="form.province"
        return-object
    >
    </v-autocomplete>

In script Tag

<script>
import axios from "axios";

export default {
    data() {
        return {
            menu: false,
            loading: false,
            form: {},
            provinces: [],
        };
    },

    created() {
        this.getProvince();
    },

    computed() {},

    methods: {
        getProvince() {
            axios
                .get(`api/v1/province/`)
                .then((res) => {
                    console.log(res);
                    this.provinces = res.data;
                })
                .catch((err) => {
                    console.log(err.response);
                });
        },
    },
};
</script>

感谢您的帮助 :) 谢谢...

Answer 1

在地区下拉列表中，您可以按如下所示按所选省份循环播放

<v-autocomplete
        :items="getDistrictsByProvince(form.province)"
        item-id="id"
        item-text="name_kh"
        label="Pls Select District"
        solo
        v-model="form.province"
        return-object
    >
</v-autocomplete>

在方法下的脚本标签中：

getDistrictsByProvince(province) {
  if(province){
    return this.provinces.find(item => item.id === province.id).district
  } else {
    return []
  }

}