vuejs上的动态选择框数据绑定

Question

我对@9​​87654323@中的数据绑定有疑问，希望这里的每个人都可以帮助我解决这个问题。
我正处于学习在 laravel 中使用 vuejs 的阶段。我在数据编辑过程中进行数据绑定有问题，我无法在选择框中显示任何信息。 接下来我包括我想要显示的数据响应和代码。

数据响应

{
  "data":{
    "id":101,
    "kode":"B100",
    "nama":"Bendung Jules Rutherford",
    "desa":{
      "id":"5103050018",
      "district_id":"5103050",
      "name":"BONGKASA PERTIWI",
      "district":{
        "id":"5103050",
        "city_id":"5103",
        "name":"ABIANSEMAL",
        "city":{
          "id":"5103",
          "province_id":"51",
          "name":"KABUPATEN BADUNG",
          "province":{
            "id":"51",
            "name":"BALI",
          }
        }
      }
    }
  }
}

这是代码：

<template>
    <div>
        <div v-if="!loading">
            <div class="form-group row">
                <label class="col-sm-3">Kode</label>
                <div class="col-sm-9">
                    <input :class="{'is_invalid' : errors.kode}" v-model="bendung.kode" type="text" class="form-control" placeholder="B0001">
                    <div class="invalid-feedback" v-if="errors.kode">{{ errors.kode[0] }}</div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3">Nama</label>
                <div class="col-sm-9">
                    <input :class="{'is-invalid': errors.nama}" v-model="bendung.nama" type="text" class="form-control" placeholder="Bendungan Mengwi">
                    <div class="invalid-feedback" v-if="errors.nama">{{ errors.nama[0] }}</div>
                </div>
            </div>
            <div :class="['form-group row', {'has-error' : errors.provinces }]">
                <label class="col-sm-3">Provinsi</label>
                <div class="col-sm-9">
                    <select @change="province" v-model="bendung.desa.district.city.province_id" class="form-control">
                        <option value="">Pilih Provinsi</option>
                        <option v-for="province in provinces" :value="province.id">
                            {{ province.name }}
                        </option>
                    </select>
                </div>
            </div>
            <div :class="['form-group row', {'has-error' : errors.cities }]">
                <label class="col-sm-3">Kota / Kabupaten</label>
                <div class="col-sm-9">
                    <select @change="city" v-model="bendung.desa.district.city_id" class="form-control">
                        <option value="">Pilih Kota/Kabupaten</option>
                        <option v-for="city in cities" :value="city.id">
                            {{ city.name }}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row" v-else>
            <div class="col-sm-12">
                <content-placeholders>
                    <content-placeholders-text/>
                </content-placeholders>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-3"></div>
            <div class="col-sm-9">
                <a class="btn btn-success" href="#" :disabled="submiting" @click.prevent="update">
                    <font-awesome-icon :icon="['fas', 'spinner']" v-if="submiting" />
                    <font-awesome-icon :icon="['fas', 'check']" v-else/>
                    <span class="ml-1">Perbaharui</span>
                </a>
                <a href="/sda/bendung" class="btn btn-danger">
                    <font-awesome-icon :icon="['fas', 'times-circle']" /> Batal</a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                errors: {},
                bendung: {},
                provinces: [],
                cities:[],
                districts: [],
                state: {
                  province: '',
                  city: '',
                  district: '',
                },
                loading: true,
                submiting: false
            }
        },

        mounted() {
            this.getBendung();
            this.getProvinces();
        },

        methods: {
            getBendung() {
                this.loading = true;
                let str = window.location.pathname;
                let res = str.split("/");
                axios.get(`${process.env.MIX_WEBSERVICE_URL}/sda/bendung/${res[3]}`)
                    .then(response => {
                        this.bendung = response.data.data;
                        this.state.province = this.bendung.desa.district.city.province_id;
                    })
                    .catch(error => {
                        this.$toasted.global.error('Bendung tidak ditemukan!');
                        location.href = '/sda/bendung';
                    })
                    .then(() => {
                        this.loading = false;
                    });
            },

            getProvinces() {
                axios.get(`${process.env.MIX_WEBSERVICE_URL}/location/province`).then(response => {
                    this.provinces = response.data;
                }).catch(error => console.error(error));
            },
            province() {
                this.state.city = '';
                const params = {
                    province: this.state.province
                }
                axios.get(`${process.env.MIX_WEBSERVICE_URL}/location/city`, {params}).then(response => {
                    this.cities = response.data;
                }).catch(error => console.error(error));
            },

            city() {
                this.state.district = '';
                const params = {
                    city: this.state.city
                };
                // /location/district?city=cityId
                axios.get(`${process.env.MIX_WEBSERVICE_URL}/location/district`, {params}).then(response => {
                    this.districts = response.data;
                }).catch(error => console.error(error));
            }
        }
    }
</script>

<style scoped>

</style>

结果就像这张照片。 我想在选择框上显示城市名称，但我有空白选择框，当我更改选择框（例如 provinsi/province）时，另一个选择框（例如 kabupaten/kota/city）将更改它的数据。

Answer 1

您可以在以前的数据已更改时获取新数据。

下面是工作示例：https://codesandbox.io/embed/vue-template-2zv2o

Answer 2

您是否尝试在 v-for 循环中使用 v-bind:key 属性？

v-bind:key="city.id"

或更好的附加索引：

v-for="(city, index) in cities"
[...]
v-bind:key="`${index}-${city.id}`"