Answer the question
In order to leave comments, you need to log in
Vuejs how to update list when property changes?
Filter by color, a list of colors is displayed colors
When a color is saved, the value of the selected color is written to sections.
But in the component, the data does not change, as I understand it, because there are no changes in the colors property and the list is not redrawn. This is all in a modal window, if you close it and open it again, then the selected color is marked as selected
How to make the colors list update so that the selected color is marked? In my example, the value is 1 or 0
computed: {
colors() {
return this.$store.state.colors;
},
sections() {
return this.$store.state.sections;
},
},
<div v-for="(item, i) in colors.values" class="color-item">
<button class="color-item__btn"
:style="{backgroundColor: '#' + item.rgbColor, color: '#' + item.rgbColorText}"
@click="setColor(item)"
>
{{getSectionSelectedColor(item) ? 1 : 0}}
</button>
setColor(colorItem) {
if (typeof this.section.filter_values.COLOR === undefined) {
this.section.filter_values['COLOR'] = false;
}
this.section.filter_values.COLOR = colorItem.id;
let newSections = this.sections.map(o => {
if (o.id === this.section.id) {
return this.section;
}
return o;
});
this.$store.dispatch('setSections', newSections)
},
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question