Vue.js- Vuex updating an object within an array inside state not reflected in component DOM

Question

Vuex/store :

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        todos: [
            {id: 1, text: 'Clean kitchen', done: false},
            {id: 2, text: 'Clean bedroom', done: false},
            {id: 3, text: 'Clean bathroom', done: false},
            {id: 3, text: 'Clean clothes', done: true},
        ],
    },
    mutations: {
        x(state, data) {
            state.todos[0] = data;
        }
    },
});

export default store;

Test.vue :

<template>
<div class="container">
    <ul>
        <li
            v-for="(item, i) in todos"
            :key="i"
        >
            <span class="description">{{ item.text }}</span>
            <span class="status">{{ item.status }}</span>
        </li>
    </ul>
    <button @click="x">Change object</button>
</div>

</template>

<script>
import { mapState } from 'vuex';

export default {
    methods: {
        x() {
            this.$store.commit('x', {id: 34, text: 'Celebrate birthday', done: false});
        }
    },
    computed : {
        ...mapState(['todos']),
    },
}
</script>

When the button "Change object" is clicked I can see in Vue Dev Tools the state of the store has changed but the data displayed by the component Test.vue has not changed and the first li item "Clean kitchen" remains. When I commit the changes in Vue Dev Tools the change happens. Not sure what I am doing wrong.

States https://vuex.vuejs.org/guide/state.html "Whenever store.state.count changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates."

See vuejs.org/v2/guide/reactivity.html#For-Arrays and vuex.vuejs.org/guide/… — Phil
– Phil, Commented Aug 14, 2020 at 0:03

tony19 · Accepted Answer · 2022-07-15 22:26:34Z

3

You have a reactivity caveat, so you should use Vue.set function :

 x(state, data) {
            Vue.set(state.todos,0,data);
        }

For more details check this

edited Jul 15, 2022 at 22:26

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 14, 2020 at 0:02

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js- Vuex updating an object within an array inside state not reflected in component DOM

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related