[Vuejs]-Vue not rendering UI changes when submitting a form

by

0👍

✅

Vue 2 has some quirky behaviour with state, specifically when dealing with arrays. I believe in this case you’d need to use Vue.set, which you can find more details about from the below link, there you can also find more documentation about reactivity in Vue 2.

https://v2.vuejs.org/v2/guide/reactivity.html

You also appear to be missing a component from your example (ProductListItem.vue)

I’d recommend upgrading to Vue 3 and take advantage of Pinia, as that is now the replacement for VueX.

If you could upload a repository with the problem in full, I’d happily take a look.

Edit:

After reviewing the repository, this looks like the fix:

change the addNewProduct mutation to the following:

addNewProduct: (state, product) => {
    product.id = product.name;
    // this particular change might not be required
    // feel free to try without
    state.products = [...state.products, product]
},

and finally change the addNewProduct action to the following:

async addNewProduct({ commit }, product) {
    await axios.post(
      "https://vue-s-261e8-default-rtdb.firebaseio.com/products.json",
       product
    );
    commit("addNewProduct", product);
}

This should fix your reactivity issues and correctly update your array. Hope this helped 🙂

Leave a comment