当我加载我的页面时,我获取了一个 optboxes
items 列表。
来源
项目资源在网上:
optboxes
page ; optboxes
页HTTP 请求很好地发送并返回足够的数据:
created(){
this.getOptboxes();
},
components: {
'optbox': OptboxComponent,
},
methods: {
getOptboxes() {
optboxes.all().then((response) => {
this.setOptboxes(response.data.output);
}).catch(() = > {
this.no_optbox_message = 'there is no optbox';
logging.error(this.$t('optboxes.get.failed'))
});
}
},
vuex: {
actions: { setOptboxes: actions.setOptboxes},
getters: { optboxesList: getters.retrieveOptboxes}
}
我正在迭代结果如下:
<div v-for="optbox in optboxesList" class="panel panel-default">
<optbox :optbox="optbox"></optbox>
</div>
店铺
const state = {
optboxes: {
/*
'akema': {
hostname: "192.168.2.23",
id: "akema",
printers: [
{
description: "bureau",
destination_port: 9100,
forward: "normal",
hostname: "1.2.3.4",
id: 0,
listening_port: 9102
}
]
}
*/
}
};
问题
如果我切换到另一个页面并返回,则会出现列表。我还注意到,使用 Vuex 扩展,我可以提交状态并查看更改。
为什么我的更改没有自动应用?
最佳答案
由于 Change Detection Caveats ,我不得不更改我的数据结构。
店铺optboxes
现在是一个数组。
const state = {
optboxes:[]
}
然后相应地更新我的突变以编辑数组。