如何在 vue 组件上显示在组合框动态中编辑的值？

Question

我有两个组件

我的第一个组件（父组件）是这样的：

<template>
    <div>
        ...
            <form class="form-horizontal" id="form-profile" @submit.prevent="submitFormProfile">
                ...
                <form-select id="province" name="province" v-model="province" :options="provinces" v-on:triggerChange="changeProvince" :is-required="isRequired" model="1">Province</form-select>
                <form-select id="regency" name="regency" v-model="regency" :options="regencies" v-on:triggerChange="changeRegency" :is-required="isRequired" model="1">Regency</form-select>
                <form-select id="district" name="district" v-model="district" :options="districts" v-on:triggerChange="changeDistrict" :is-required="isRequired" model="1">District</form-select>
                ....
            </form>
        ...
    </div>
</template>
<script>
    export default {
        data() {
            return {
                province: null,
                regency: null,
                district: null,
            }
        },
        mounted() {
            ...
            this.getUserLogin()
            .then((response) => {
                let user = response.data
                this.province = user.address_list.province
                this.regency = user.address_list.regency
                this.district = user.address_list.district
            })
            .catch(error => {
                console.log(error)
            });
        },
        ...
    }
</script>

我的第二个组件（子组件）是这样的：

<template>
    <div class="form-group">
        <label :for="id" class="col-sm-3 control-label"><slot></slot></label>
        <div class="col-sm-9">
            <select :id="id" :name="name" class="form-control" v-model="selected" v-on:change="applySelected">
                <option disabled value="">Please select one</option>
                <option v-for="option in options" :value="option.id">{{option.name}}</option>
            </select>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['value', ...],
        data() {
            return {
                selected: this.value|| ''
            }
        },
        mounted() {
            console.log(this.value)
        }
        ...
    }
</script>

组件执行时会调用ajax获取值province, regency, district

如果我在响应ajax（父组件）中console.log(response.data)，我会得到值

但如果我在第二个组件中console.log(this.value)，我找不到值。值=null

这似乎是因为调用子组件时，ajax进程还没有完成

我该如何解决这个问题？

Answer 1

选项 1 - 添加观察者

问题是你只在组件初始化时在data 中设置selected: this.value || ''。要让它更新，您还需要添加一个观察者，如下所示：

watch: {
  value(newValue) {
    this.selected = newValue;
  }
}

这将在每次父项更改时更新子项中的 selected 属性。

选项2 - 直接参考prop

您可以完全摆脱selected，只在孩子中使用value。它将始终与父级保持最新。