如何 inject/append v-autocomplete 中的数据，同时仍然能够使用 vue/vuetify 查看挂载时的旧数据

Question

我正在尝试构建一个更新对话框，但我目前被卡住了，因为我想不出如何查看字段中的旧值并且仍然能够将旧值更改为新值的解决方案。

data: () => ({
 doctorname: null,
    doctor_uuid: null,
    chosen_doctor: {},
  }),

<v-autocomplete
  @input.native="(event) => fetchDoctorinfobyname(event)"
  cache-items
  class="dr-name-input"
  v-model="doctor_uuid"
  :items="gotDoctorNames"
  item-text="firstName"
  item-value="uuid"
  dense
  append-icon=""
  label="Doctor Name"
  @input="fetchDoctorinfobyname"
></v-autocomplete>

fetchDoctorinfobyname() {
      let bata = this.doctor_uuid;
      this.chosen_doctor = this.$store.getters.getterdoctorNames.find(
        (item) => item.uuid === bata
      );
      this.doctorname = this.chosen_doctor?.firstName;
      this.$store.dispatch("getDoctorinfobyname", bata)
    },

我正在做的是 v-autocomplete 有一些属性，比如 item-value 保存所选项目的值例如我选择保存我在 item-value 属性中选择的医生的 uuid 然后将其保存在 v-model 'doctor_uuid'

我采用这种方法的原因是 v-autocomplete :items 属性被提供了一个对象数组，其中包含每个医生的信息

我希望能够查看所选医生的姓名，因此 'item-text' 属性并且仍然能够为我的更新功能提供整个所选医生的信息，因此我为什么要保存该医生的 uuid并再次循环 getters 以在获取函数中找到该对象。

这种方法对我来说效果很好，但我还不能显示旧医生的名字

请记住，我必须重复这 15 次...对于 15 个字段

我们正在努力实现以下目标：

显示老医生信息（姓名）
单击此字段会显示来自 :items（getters）
仍然能够保留新选择的医生的 uuid，因为我需要整个对象，因此我重新循环 uuid 以找到所选对象并将其保存在 chosen_doctor object

假设如下：-

gotDoctorNames = [{firstName:"a", uuid:"1"},{firstName:"b", uuid:"2"}...]

您还有包含旧数据的 selectedEvent 对象： {firstName:"foo", uuid:"a1"..and much more for different fields..}

我们希望能够将这些旧数据追加到字段中，并在单击该字段时根据其相关 getter 数组输入该字段并查看新数据以更改旧数据

非常感谢您的宝贵时间

Answer 1

由于您需要在用户选择时检索医生对象，因此您应该在 v-autocomplete 组件中使用 return-object 属性。因此，给定 gotDoctorNames = [{firstName:"a", uuid:"1"},{firstName:"b", uuid:"2"}...]，当客户端选择 a 时，组件将 return {firstName:"a", uuid:"1"}.

有了这些更改，您将不需要在每次选择时都从商店中获取：

data: () => ({
 doctorname: null,
 // doctor_uuid: null,
 chosen_doctor: {},
}),

 <v-autocomplete
   cache-items
   class="dr-name-input"
   v-model="chosen_doctor"
   :items="gotDoctorNames"
   item-text="firstName"
   return-object
   dense
   append-icon=""
   label="Doctor Name"
/>

现在如果您需要了解选择的变化，您可以在 chosen_doctor:

上设置一个观察者

watch: {
  chosen_doctor: {
    deep: true,
    handler (newValue, oldValue) {
      // do something with the values
    }
  }
}

如何 inject/append v-autocomplete 中的数据，同时仍然能够使用 vue/vuetify 查看挂载时的旧数据

How to inject/append data in v-autocomplete whilst still being able to view old data on mount using vue/vuetify

vuejs2

nuxt.js

vuetify.js