在 bootstrap-vue table 上显示详细信息的问题
Issue with show details on bootstrap-vue table
有没有人遇到过这个错误,知道如何解决它
我正在通过 nuxt 和 vuex 模块从后端提取数据并返回到我的组件中的 table。
这一切都很好,直到我尝试在我的 bootstrap-vue table 中切换细节,当我得到 [vuex] 不要在突变处理程序之外改变 vuex 存储状态。即使我在隐藏的细节中什么都没有
有没有人遇到过这个问题,如果有我该如何解决
非常感谢
是的,发生这种情况是因为 bootstrap-vue 如何管理输入其中的对象数组以创建 table。
当您定义 b-table 组件并通过 :items 属性 提供项目列表时,该组件获取数组并对其执行转换,添加函数和属性。此过程似乎不会触发 Vuex 约束以防止变异函数之外的变异。
但是,当您调用其中一个添加的函数时,在本例中为 row.toggleDetails 函数,然后 Vuex 存储会意识到变化并抛出错误。
可能有两种方法可以解决此问题。
首先,如果您是从一个简单的 Vuex store 进行操作,您可以将这行代码添加到 store(如本期所示: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))
我为解决这个问题所做的事情有点老套,但我在我的对象上定义了一个 _showDetails 属性 显示在 b-table 中,其中集调用了一个突变和警告消失了;无需全局关闭 Vuex 的警告。
class myObject {
constructor() {
...
this.__showDetails = false
}
...
get _showDetails () { return this.__showDetails }
set _showDetails (value) {
store.commit('toggleRowDetailsvisibility', {ref: this, val: value})
}
}
然后在我的数据存储中定义了以下突变:
toggleRowDetailsvisibility(state, parameters){
parameters.ref.__showDetails = parameters.val
}
请注意上面代码中的单_和双__...
我遇到了同样的问题。但是,我能够使用 vuex-map-fields 包修复它。这使得双向数据绑定到 Vuex 成为可能。这意味着 bootstrap-vue table 可以在不抛出 Vuex 错误的情况下改变底层数据。
虽然我认为计算 属性 上的映射函数应该可以工作,但没有。
有没有人遇到过这个错误,知道如何解决它
我正在通过 nuxt 和 vuex 模块从后端提取数据并返回到我的组件中的 table。
这一切都很好,直到我尝试在我的 bootstrap-vue table 中切换细节,当我得到 [vuex] 不要在突变处理程序之外改变 vuex 存储状态。即使我在隐藏的细节中什么都没有
有没有人遇到过这个问题,如果有我该如何解决
非常感谢
是的,发生这种情况是因为 bootstrap-vue 如何管理输入其中的对象数组以创建 table。
当您定义 b-table 组件并通过 :items 属性 提供项目列表时,该组件获取数组并对其执行转换,添加函数和属性。此过程似乎不会触发 Vuex 约束以防止变异函数之外的变异。
但是,当您调用其中一个添加的函数时,在本例中为 row.toggleDetails 函数,然后 Vuex 存储会意识到变化并抛出错误。
可能有两种方法可以解决此问题。
首先,如果您是从一个简单的 Vuex store 进行操作,您可以将这行代码添加到 store(如本期所示: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))
我为解决这个问题所做的事情有点老套,但我在我的对象上定义了一个 _showDetails 属性 显示在 b-table 中,其中集调用了一个突变和警告消失了;无需全局关闭 Vuex 的警告。
class myObject {
constructor() {
...
this.__showDetails = false
}
...
get _showDetails () { return this.__showDetails }
set _showDetails (value) {
store.commit('toggleRowDetailsvisibility', {ref: this, val: value})
}
}
然后在我的数据存储中定义了以下突变:
toggleRowDetailsvisibility(state, parameters){
parameters.ref.__showDetails = parameters.val
}
请注意上面代码中的单_和双__...
我遇到了同样的问题。但是,我能够使用 vuex-map-fields 包修复它。这使得双向数据绑定到 Vuex 成为可能。这意味着 bootstrap-vue table 可以在不抛出 Vuex 错误的情况下改变底层数据。
虽然我认为计算 属性 上的映射函数应该可以工作,但没有。