为什么 Vuetify Autocomplete 不选择正在设置的数据？

Question

我使用 Vuetify 自动完成作为可重用组件来显示键/值对中的作业列表。在创建记录时，组件工作正常，但在编辑应填写数据的位置时，数据有值但不显示在组件上。

JobDropdownSelector.vue:
..................................................... ..................................................... ....................................

<template>
    <v-autocomplete
        v-model="job"
        label="Job Designation"
        item-value="id"
        item-text="name"
        return-object
        :items="jobs"
        @change="onChange"
    >
    </v-autocomplete>
</template>
<script>
export default {
    props: {
        selectedJob: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            jobs: [],
            job: null
        };
    },
    methods: {
        getDataFromApi() {
                axios.get("api/jobs")
                    .then(response => {
                        this.jobs = response.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                        reject();
                    });
        },
        onChange(e) {
            this.job = e;
            this.$emit("onChange", e);
        }
    },
    watch: {
        selectedJob: {
            deep: true, 
            immediate: true,
            handler(newValue, oldValue) {
                this.job = newValue;
            }
        }
    },
    mounted() {
        this.getDataFromApi();
    }
    
};
</script>

EditForm.vue:
..................................................... ..................................................... ....................................

<template>
    <div>
    <JobDropdownSelector
                v-model="job"
                :selectedJob="job"
                @onChange="onChangeJob"
        >
        </JobDropdownSelector>
    </div>
</template>


<script>
import JobDropdownSelector from "../components/JobDropdownSelector";

export default {
    components: {
        JobDropdownSelector
    },
    data() {
        return {
            job: null
        };
    },
    methods: {
        onChangeJob(e) {
            this.job = e;
        },
        getInitialJob() {
            axios.get("api/jobs/22").then(response => {
                this.job = response.data.data;
            });
        }
    },
    mounted() {
        this.getInitialJob();
    }
};
</script>

Display Console

Answer 1

看起来你覆盖了job 两次：在onChangeJob 方法上和通过JobDropdownSelector 上的v-model。

您可以尝试使用input 事件来更新modek，而不是发出额外的事件。

JobDropdownSelector.vue

methods: {
  onChange(e) {
    // You don't need set job because it's connected via v-model.
    // this.job = e; 
    this.$emit("input", e);
  }
}

这将导致 EditForm.vue 中的job 应该在下拉更改后自动更新。