在 <v-data-table> 的项目上添加额外的字段

Question

我有medications 对象如下：

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

我想在此对象列表中添加另一个字段residentName，或者有什么方法可以在v-data-table 中显示“residentName”？：

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

我正在使用 `v-data-table> 作为：

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

现在我想基于resident 字段添加一个residentName 字段。为此，我做了以下事情：

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

在header

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

这是在resident.js getter 模块中

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

编辑：这是有效的，即我在创建页面时收到residentName，但如果我刷新页面，我会收到residentName=undefined

Answer 1

您可以使用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
  },
}