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

user_16458398 0
Viewed 185

I am trying to build an update dialog and I am currently stuck because I can't think of a solution of how to view old values in the fields and still be able to change old values to new values.

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)
    },

What I am doing is v-autocomplete has some properties such as item-value which saves the value of the chosen item for example I chose to save the uuid of the doctor that I picked in item-value property which then saves it in the v-model 'doctor_uuid'

Reason for why I am going for this approach is the v-autocomplete :items property is fed an array of objects which contains information for each doctor

I want to be able to view the chosen doctor name hence 'item-text' property and still be able to feed my update function the entire chosen doctor hence why I am saving the uuid of that doctor and looping on the getters again to find that object in the fetch function.

This approach is working fine for me but I am yet to be able to display the old doctor name

Bare in mind I have to repeat this 15 times... for 15 fields

What we are trying to achieve here is the following:

  1. display old doctor information ( name )
  2. on click on this field display different doctors from the :items (getters)
  3. still be able to retain the uuid of the newly chosen doctor because i need the entire object hence why i re-loop on the uuid to find the chosen object and i save it in chosen_doctor object

assume the following:-

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

You also have selectedEvent object which contains old data: {firstName:"foo", uuid:"a1"..and much more for different fields..}

We want to be able to append this old data in the fields and on click on the field feed the field with its respect getter array and view new data to change old data

Much appreciate your time

vuejs2 nuxt.js vuetify.js
1 Answers

Since you need to retrieve the doctor object on user selection, you should use the return-object prop in the v-autocomplete component. So, given gotDoctorNames = [{firstName:"a", uuid:"1"},{firstName:"b", uuid:"2"}...], when the client selects a, the component will return {firstName:"a", uuid:"1"}.

With these changes you won't need to fetch from store on every selection:

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

Now if you need to know the changes in selection, you can setup a watcher on the chosen_doctor:

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