Установите поле данных из геттера и добавьте дополнительное вычисляемое поле
Я хотел установить поля внутри данных с помощью геттеров:
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

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