vuejs2 - 在 bootstrap-vue 表上显示详细信息的问题

Question

有没有人遇到过这个错误，知道如何解决

我正在通过 nuxt 和 vuex 模块从后端提取数据并返回到我组件中的表。

这一切都很好，直到我尝试在我的 bootstrap-vue 表中切换细节，当我得到 [vuex] 不要在突变处理程序之外改变 vuex 存储状态。即使我在隐藏的细节中一无所有

有没有人遇到过这个问题，如果有我该如何解决

非常感谢

Answer 1

是的，发生这种情况是因为 bootstrap-vue 如何管理输入到其中以创建表的对象数组。

当您定义一个 b-table 组件并通过 :items 属性提供项目列表时，该组件会获取数组并对其执行转换，添加函数和属性。这个过程似乎不会触发 Vuex 约束以防止突变函数之外的突变。

但是，当您调用其中一个添加的函数时，在本例中为 row.toggleDetails 函数，然后 Vuex 存储会意识到变化并抛出错误。

可能有两种方法可以解决此问题。

首先，如果您是从一个简单的 Vuex 商店进行操作，您可以将这行代码添加到商店中(如本期所示:https://github.com/nuxt/nuxt.js/issues/1917#issuecomment-338471402):

export const strict = false

这将取消对突变的约束。这可能只适用于简单的应用程序。

最好的选择是在计算属性上使用映射函数。

computed: {
    myTableArr() {
         this.$store.getters['myTableArr'].map(mta => mta);
    }
}

有了这个保护措施，您将返回一个新数组，而不是对您的 Vuex 数组的引用。 bootstrap-vue b-table 组件现在可以修改它，您可以在代码中使用这些修改而不会导致 Vuex 错误。

我通常也在我的 map 函数中使用构造函数，所以它是:

.map(mta => new modelConstructor(mta))