vue.js - 为什么 Vuetify Autocomplete 不选择正在设置的数据?
问题描述
我使用 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>
编辑表单.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>
解决方案
看起来您覆盖job
了两次:在onChangeJob
方法上和通过 v-model on JobDropdownSelector
。
您可以尝试使用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.vuejob
在下拉更改后自动更新。
推荐阅读
- jquery - Angular 5 - 包含 jquery 插件
- protractor - 我如何处理 CI 上的图像比较?
- kubernetes - 运行 pod.yaml 时规范无效
- terraform - 如何使用 Terraform 配置自动修复和自动扩展 Google Cloud Kubernetes 集群并禁用 stackdriver
- database - 在表单liferay 7中添加字段名称+姓氏+生日日期
- javascript - ESC POS蓝牙打印机清除缓冲区
- c - 分析 Tessy 中的模块时出错(*.o 文件中定义的符号乘法)
- cmake - cmake 使用与原始目标不同的名称安装 xxxTargets.cmake
- html - 在我的网站中集成 Word 在线编辑器
- delphi - 如何让 TTimer 重复称为有限次数的函数?