the data in store is not involved in the operation of the page, so why is it affected?
Why are the two items printed in updated always equal?
using chrome"s vue plug-in, you can clearly see in the vuex interface that after triggering printing in updated, the channelsOn in store has not changed. Why has the printed result changed?
the original intention is to use data to temporarily store the data on this page. When you exit the page, compare whether the original data in data and store are equal, and then further operate
<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"},
]
}
}