checkbox与data和checkbox自动双向绑定?
在页面操作的过程中并没有涉及到store中的数据,为什么会被影响呢??
为什么在updated中打印的2项总是相等?
使用chrome的vue插件,可以在vuex界面明确看到触发updated中的打印后,store中的channelsOn并未改变,为什么打印出的结果却是已经改变了?
本意是使用data暂存本页数据,退出页面时比对data与store中的原数据是否相等,再进一步操作
<label v-for="(channel, index) in channels" :key="index">
<input type="checkbox" class="canshu-input canshu-checkbox"
:checked="status.channelsOn.indexOf(channel.id)>=0"
@click='checkedOne(channel.id)'>
{{channel.txt}}
</label>
js:
updated(){
console.log(this.status.channelsOn);
console.log(this.$store.state.canshu.status.channelsOn);
},
methods: { //不重要吧
checkedOne(eleId) {
let idIndex = this.status.channelsOn.indexOf(eleId)
if (idIndex >= 0) {
this.status.channelsOn.splice(idIndex, 1)
} else {
this.status.channelsOn.push(eleId)
}
}
},
data() {
return {
status: {
channelsOn: this.$store.state.canshu.status.channelsOn
},
channels: [ //不重要
{ id: '1', txt: '通道1'},
{ id: '2',txt: '通道2'},
{id: '3',txt: '通道3' },
{id: '4',txt: '通道4'},
]
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。
此值非彼值,你只是把
store
里面的值给了你组件的data,后续改变的也只是data的值了解更多参考一下
vuex
的文档吧