CODEWITHSUNDEEP
vue.jsvuex
Maxim Anisimov
Maxim Anisimov

Reputation: 13

Why does list-transition in vue.js doesn't work properly with vuex arrays?

I am working with vue.js and vuex. I have tried to build something like this Vue.js list-transition docs, but i am stuck with a problem, that vue.js list-transition doesn't work properly with my example that i created using vuex. Example on JSFiddle: click.

Here is the vue.js code:

const store = new Vuex.Store({
  state: {
    items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  },
  getters: {
    items(state) {
      return state.items;
    },
  },
  mutations: {
    delete(state, payLoad) {
      state.items.splice(payLoad, 1);
    },
  },
  actions: {
    delete(store, payLoad) {
      store.commit('delete', payLoad);
    },
  },
});
const app = new Vue({
  store,
  el: '#app',
  template: `<div id="list-demo">
    <button v-on:click="remove">Delete</button>
    <transition-group name="list" tag="p">
        <span v-for="(item,index) in items" v-bind:key="index" class="list-item">
      {{ item }}
        </span>
    </transition-group>
    </div>`,
  computed: {
    items() {
      return store.state.items;
    }
  },
  methods: {
    remove: function() {
      this.$store.dispatch('delete', 0);
    },
  },
});

Upvotes: 0

Views: 422

Answers (1)

Maxim Anisimov
Maxim Anisimov

Reputation: 13

Okey, i solved this, the problem was in key attribute, when i splicing an array, index is changing so animation doesn't work properly. It will work if i set key attribute to item

Upvotes: 1

Related Questions