I'm attempting to modify a Computed Property that receives its data from the vuex state.
The data is retrieved from the store. I aim to update the value allowed in the store. But, when I click on my update button, the value does not get updated.
Here is the HTML snippet:
<div @click="update">update</div>
<b-row>
<b-col v-for="cat in categories" :key="cat.id" sm="12" md="6" lg="4">
<div>{{cat.allowed}}</div>
</b-col>
</b-row>
computed: {
...mapGetters("categories", ["customerCategories"]),
categories() {
return this.customerCategories;
},
methods: {
update() {
this.categories.filter((element) => (element.allowed = true));
console.log(this.categories); // value of allowed is not being updated
},
}
,
// Data retrieved from the store
categories = [
{
allowed: false,
description: "hsdkj fskdjf skfj",
id: 15
},
{
allowed: false,
description: "blah blah",
id: 13
},
{
allowed: false,
description: "more blah blah",
id: 13
},
{
allowed: false,
description: "lots more blah blah",
id: 1
}
]
Despite trying to target and alter the vuex code, the value is still not updating as expected.
const data = [...this.categories];
const l =[];
const updated = Array.from(data);
updated.forEach(res => {
res.allowed = 'boo';
l.push(res);
});
console.log(l);