Установите поле данных из геттера и добавьте дополнительное вычисляемое поле - PullRequest
Новая
       16

Установите поле данных из геттера и добавьте дополнительное вычисляемое поле

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

Я хотел установить поля внутри данных, используя геттеры: 

export default {
 data () {
    return {
        medications: [],
       }
   },
  computed: {
  ...mapGetters([
        'allMedications',
        'getResidentsById',
    ]),

Я хотел установить medications = allMedications, я знаю, что мы можем использовать {{allMedications}}, но моя проблема в том, что у меня есть: 

medications {
    name: '',
    resident: '', this contains id
    .......
   }

Теперь я хотел позвонить getResidentsById и установить дополнительное поле на лекарства как: 

  medications {
    name: '',
    resident: '', this contains id
    residentName:'' add an extra computed field
    .......
   }

Я сделал так: 

watch: {
  allMedications() {
      // this.medications = this.allMedications
      const medicationArray = this.allMedications
      this.medications = medicationArray.map(medication => 
    ({
        ...medication,
        residentName: this.getResidentName(medication.resident)
    })
    );
    },
 },
 method: {
    getResidentName(id) {
      const resident = this.getResidentsById(id)
      return resident && resident.fullName
    },
  }

Но это кажется проблемой, потому что только когда есть изменения в allMedications , тогда метод на watch становится активным и устанавливается residentName .

1 Ответ

1 голос
/ 27 января 2020

В подобных ситуациях вы хотите, чтобы наблюдатель запускался сразу после создания компонента. Вы можете переместить логи c в метод, а затем вызвать его как из наблюдателя, так и из созданного хука, но есть более простой способ.

Вы можете использовать длинную версию наблюдателя, чтобы передать опцию immediate: true. Это заставит его работать мгновенно, как только вычисленное свойство будет разрешено. 

watch: {
  allMedications: {
    handler: function (val) {
      this.medications = val.map(medication => ({
        ...medication,
        residentName: this.getResidentName(medication.resident)
      });
    },
    immediate: true
  }
}
...