时间戳

首页 > 解决方案 > 更新vuex中的数组在组件中没有反应

vue.js - 更新vuex中的数组在组件中没有反应

问题描述

我正在尝试推送/弹出 vuex 模块中的数组。

在 vue 开发工具中查看时，数组会正确添加/删除。但是计算的属性不会更新，我期待更改但它不起作用。

在 Vuex 模块中

// initial state
const state = {
  expandedPayments: []

}

// getters
const getters = {
  expandedPayments(state) {
    return state.expandedPayments
  },


}

// mutations
const mutations = {
  [Mutations.PUSH_PAYMENTID](state, id) {
    state.expandedPayments.push(id)
  },

  [Mutations.POP_PAYMENTID](state, id) {
    _.pull(state.expandedPayments, id)
  }
}

在组件中

 <tr v-show="isExpanded">

...

 isExpanded() {
      return  _.includes(this.expandedPayments, this.paymentId)
    },
    ...mapGetters('payment', ['expandedPayments', 'isExpanded'])

标签： vue.jsvuex

解决方案

我认为这是因为您在includes这里使用的是 lodash 的方法。这个方法应该检查一个元素是否是集合的一部分。

你可能想试试这个：

isExpanded() {
    return  this.expandedPayments.indexOf(this.paymentId) !== -1
}

推荐阅读