我有几个组件使用vue-tables-2,但其中一个组件在我更改路由之前不会更新表.

component

    <template>
//..
    <div class="table-responsive" >
       <v-client-table ref="table" name="vCardTable" 
          :data="vCardTableData.data" 
          :columns="vCardTableData.headers" 
          :options="vCardTableData.options"/>
    </div> 
//..
    </template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";

export default {
  name: "VCard",
  computed: {
    ...mapState("commons", ["user"]),
    ...mapGetters({ vCardTableData: "vCard/vCardTableData" })
  },
  mounted() {
    var self = this;
    self.$nextTick(() => {
      self.$store.dispatch("vCard/getVCards"); <-- GET TABLE DATA
    });
  }
};
</script>

store

const state = {
    vCardTableData: {
        data: [],
        headers: [
           //..
        ],
        options: {
            filterable: false,
            preserveState: false,
            headings: {
                //..
            },
            texts: {
                //..
            },
            pagination: {
                dropdown: true,
            },
            templates: {
                //..
            },
        },
    }
}

const getters = {
    vCardTableData: state => state.vCardTableData
}

const actions = {
    getVCards({commit, dispatch}) {
            return api.request("get", "getvcards").then(response => {
                setTimeout(() => {  
                    commit("setVCardTableData", response.data.vcards);
                }, 300);
            }).catch(error => {
                console.log(error);
            });
    }
}

const mutations = {
    clearTableData: (state) => {
        if (state.vCardTableData.data) {
            state.vCardTableData.data = [];
        }
    },
    setVCardTableData : (state, vCardTableData) => state.vCardTableData.data = vCardTableData   
}

如图所示,该表包含以下数据:

enter image description here

enter image description here

02/05/2018

现在我已经看到,如果我用promise 直接在组件中修改状态,它就会工作:

this.$store.dispatch("vCard/getVCards", []).then((responseData)=>{
       this.$store.state.vCard.vCardTableData.data = responseData;
  }); 

Does anyone know why?

推荐答案

我的最后一个答案是错误的,我不记得我已经将表格的vuex参数更改为false.我不知道为什么,但做一个推它的工作:

setVCardTableData : (state, vCardTableData) => {
    vCardTableData.forEach(tableData => {
            state.vCardTableData.data.push(tableData);   
    });
} 

Vue.js相关问答推荐

Vue3:如何在功能组件中重用插槽vnode

如何在FormKit中验证文本输入框中不能输入数字

处理多张卡片中的按钮

我在表格中创建了一个包含信息的新行,但在 Cypress e2e 测试中我无法获得最后一行(新行)

nuxt.js auth 始终重定向到登录,而不是允许转到带有 auth: false 的页面,

如果单元格不可见,则以编程方式打开行的编辑模式. Ag 网格,Vue.js

Vue,Composition API:如何从react 式转换中跳过深度嵌套的属性?

路径别名在 vue 脚本块中不起作用

如何在 Vue.js 中添加动态组件/部分

在 Vue.js 中,为什么我们必须在导入组件后导出它们?

vuejs挂载生命周期未触发

在Vue.js中从父组件执行子方法

v-for 如何在继续之前判断未定义的列表

使用 Vue-cli,我在哪里声明我的全局变量?

Vuetify Jest 未知自定义元素

如何在 Vue.js 插槽范围内传递方法

在 VueJS 中使用 Axios - 这个未定义

Vuetify 离线文档

仅在提交时验证 vuetify 文本字段

Vue.js 无法读取 null 的属性 length长度