Добавить дополнительное поле на элементы - PullRequest
Новая
       47

Добавить дополнительное поле на элементы

0 голосов
/ 29 января 2020

У меня есть medications объект следующим образом: 

medications: [
     {
        'name': 'abc',
        'id': naks23kn,
        'resident': //this is resident id, resident is another object
         .........
     },
     {.......},.....
     ]

Я хотел добавить другое поле residentName в этот список объектов или есть какой-либо способ, чтобы я мог отобразить 'residentName' в v-data-table?: 

 medications: [
     {
        'name': 'abc',
        'id': naks23kn,
        'resident': //this is resident id, resident is another object
        'residentName': 'ad' //set this new field
         .........
     },
     {.......},.....
     ]

Я использую `v-data-table> as: 

<v-data-table
      :headers="headers"
      :items="medications"
      :items-per-page="20"
      :search="search"
      class="elevation-23"
    >

Теперь я хочу добавить поле residentName на основе resident поле. Для этого я сделал следующее: 

export default {
    data() {
        return {
           medications: [],
        }
    },
     computed: {
      ...mapGetters([
        'allMedications', //this is used to get all medication from medication store
        'getResidentsById',
      ]),
    },
    created() {
       this.get_resident_list(),
       this.get_registered_medication_list();
    },
    methods: {
      ...mapActions([
        'get_registered_medication_list', //this is used to call API and set state for medication
        'get_resident_list', //this is used to callAPI and set state for resident
      ]),
      getResidentName(id) {
        const resident = this.getResidentsById(id)
        return resident && resident.fullName
      },
    },
   watch: {
     allMedications: {
      handler: function () {
        const medicationArray = this.allMedications;
        console.log("Created this");
        this.medications = medicationArray.map(medication => ({
            ...medication,
            residentName: this.getResidentName(medication.resident)
        })
        );
      },
      immediate: true
      },
    }
 }

In header

headers: [ { text: 'Medication Name', value: 'name' }, { text: 'Resident', value: 'residentName' }, ]

Это в resident.js геттерном модуле 

getResidentsById: (state) => (id) => {
        return state.residents.find(resident => resident.id === id)
    }

Редактировать: это работает, то есть я получаю residentName при создании страницы, но если я обновлю sh страницу, я получу residentName=undefined

1 Ответ

0 голосов
/ 29 января 2020

Вы можете использовать map, чтобы добавить новую опору для каждого вашего элемента в массиве 

let medications = [{
  name: 'abc',
  id: 'naks23kn',
  resident: 1
}]

medications.map(item => item.residentName = "Your Resident Name")
console.log(medications)

Это должно работать 

watch: {
  allMedications: {
    handler: function() {
      const medicationArray = this.allMedications;
      console.log("Created this");
      this.medications = medicationArray.map(medication => medication.residentName = this.getResidentName(medication.resident)));
    },
    immediate: true
  },
}
...