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

Question

I have two component

My first component (parent component) like this :

<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>

My second component (child component) like this :

<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>

When the components executed, it will call ajax to get value province, regency, district

If I console.log(response.data) in the response ajax (parent component), I get the value

But if I console.log(this.value) in the second component, I don't find the value. The value = null

This seems to happen because when calling child component, the ajax process is not finished yet

How can I solve this problem?

Answer 1

Option 1 - Add a watcher

The problem is you only set selected: this.value || '' selected: this.value || '' in your data when the component is initialized. To have it update, you need to add a watcher too, like so:

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

This will update the selected prop in child each time the one in parent changes.

Option 2 - Refer directly to the prop

You can get rid of selected altogether and just use value in the child. It will always remain up to date with the parent.