Question

在我的Vuex突变中，我想替换状态下的数组元素，如下所示：

UPDATE_MAILING(state, mailing) {
    let index = _.findIndex(state.mailings, {id: mailing.id});

    state.mailings[index] = mailing
}

但这不会更新绑定到此数组的模板。我该如何反应性地更新数组元素？

Answer 1

您应该使用Vue.$set（或在Vue实例中使用this.$set）：

UPDATE_MAILING(state, mailing) {
    let index = state.mailings.findIndex(item => item.id === mailing.id)
    Vue.$set(state.mailings, index, mailing)
}

文档：Vue.js → Reactivity in Depth

Answer 2

您可以使用Array.prototype.splice来替换项目：

mutations: {
  UPDATE_MAILING(state, mailing) {
    const index = state.mailings.findIndex(x => x.id === mailing.id);
    state.mailings.splice(index, 1, mailing); 
  }
}

demo

Answer 3

我想告诉你，如果要运算符Array type，最好使用mthod like splice slice pop push shift unshift，只有您自己使用，模板才能绑定到您的数组。不要将array [index]用作运算符；希望能为您提供真诚的帮助

Vuex-更新数组内的整个对象

3 个答案: