我得到了一个printerList
计算后的属性,应在getPrinters()
解决后重新评估,但看起来并非如此。
来源在线:optbox.component.vue,vuex,optboxes.service.js
零件
<template>
<div v-for="printer in printersList">
<printer :printer="printer" :optbox="optbox"></printer>
</div>
</template>
<script>
…
created() { this.getPrinters(this.optbox.id); },
computed: {
printersList() {
var index = optboxesService.getIndex(this.optboxesList, this.optbox.id);
return this.optboxesList[index].printers
}
},
vuex: {
actions: { getPrinters: actions.getPrinters,},
getters: { optboxesList: getters.retrieveOptboxes}
}
<script>
动作
getPrinters({dispatch}, optboxId) {
printers.get({optbox_id: optboxId}).then(response => {
dispatch('setPrinters', response.data.optbox, response.data.output.channels);
}).catch((err) => {
console.error(err);
logging.error(this.$t('printers.get.failed'))
});
},
变异
setPrinters(optboxes, optboxId, printers) {
var index = this.getIndex(optboxes, optboxId);
optboxes[index] = {...optboxes[index], printers: printers }
},
题
为什么不printerList
重新计算计算出的属性(即,该属性v-for
为空)
这是由于以下行:
optboxes[index] = {...optboxes[index], printers: printers }
。您正在直接设置带有索引的项目,Vue无法观察到它
尝试从数组中拼接旧项并推送新项。