Question

我正在使用vue.js和vuex。我试图建立类似Vue.js list-transition docs的东西，但是我遇到了一个问题，即vue.js列表转换无法与我使用vuex创建的示例一起正常使用。 JSFiddle上的示例：click。

这是vue.js代码：

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);
    },
  },
});

Answer 1

Okey，我解决了这个问题，问题出在键属性中，当我拼接数组时，索引正在更改，因此动画无法正常工作。如果我将 key 属性设置为 item

，它将起作用

为什么vue.js中的list-transition无法与vuex数组一起正常工作？

1 个答案: