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


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

27.01.2020 08:33:42 Просмотров 68 Источник

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

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, то метод on watch становится активным и residentName устанавливается.

У вопроса есть решение - Посмотреть?

Ответы - Установите поле данных из геттера и добавьте дополнительное вычисляемое поле / Set data field from getter and add extra computed field

Cue

27.01.2020 09:59:05

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

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

watch: {
  allMedications: {
    handler: function (val) {
      this.medications = val.map(medication => ({
        ...medication,
        residentName: this.getResidentName(medication.resident)
      });
    },
    immediate: true
  }
}
https://stackoverflow.com/questions/59936143/set-data-field-from-getter-and-add-extra-computed-field/59937276#comment106023477_59937276
Я испробовал оба твоих способа, но ничего не вышло.
https://stackoverflow.com/questions/59936143/set-data-field-from-getter-and-add-extra-computed-field/59937276#comment106025790_59937276
Также allMedication в часах вызывается дважды на странице загрузки. Не потому ли, что в первый раз он вызывается во время создания, а после этого устанавливается allMedication в геттере и снова вызываются часы ?
Помочь в развитии проекта:
Закрыть X