M
M
Mikhail Smirnov2020-10-30 13:43:22
Vue.js
Mikhail Smirnov, 2020-10-30 13:43:22

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 question

Ask a Question

731 491 924 answers to any question