如何在 VueJs 的数据表中显示数据？答案

【问题标题】：How to show data in Datatables in VueJs?如何在 VueJs 的数据表中显示数据？
【发布时间】：2020-02-12 07:36:49
【问题描述】：

数据附加在数据表旁边，而不是内部。

我在 vuex 的操作中从 API 获取数据（记录数组），并将状态（数组）从 getter 返回到使用数据表的组件。

import axios from "../../assets/constants";
import router from '../../router'

const state = {
    users: []
}
const getters = {
    users: state => state.users,
    blockedUsers: state => state.blockedUsers,
    user: state => state.user
}

const actions = {
    async getUsers({ commit }) {
        await axios.get(`user`)
            .then(res => {
                commit('setGetUsers', res.data)
            })
            .catch(err => console.log(err.response.data.message));
    })
},

const mutations = {
    setGetUsers: (state, newUsers) => (state.users = newUsers),
}

export default {
    state,
    getters,
    actions,
    mutations
}

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  methods: {
    ...mapActions(["getUsers"])
  },
  computed: mapGetters(["users"]),
  created() {
    this.getUsers();
    $(".zero-configuration").DataTable();
  }
};
</script>

结果应该是我从 API 获取的数据必须显示在数据表中。

据我了解，这里造成的问题是

$(".zero-configuration").DataTable();

这是在之前执行的

this.getUsers()

这不应该是正确的解释，因为我在 axios 中使用了 await。

谁能解释为什么会这样？

【问题讨论】：

看起来你的 jquery 与 vue 的混合/匹配。因此可能是订单问题
@ekjcfn3902039 可以，但我找到了解决方案。现在它工作正常。

标签： javascript jquery vue.js promise datatables

【解决方案1】：

事实证明，当我在得到 axios 的响应后提交突变时，设置状态需要时间。由于我在这里没有使用承诺，而状态正在发生变化，

$(".zero-configuration").DataTable();

从

获得控制权

this.getUsers()

并在它完成之前被执行。

我在 getUsers 操作中使用 promise 时遇到了这个问题

getUsers({ commit }) {
        return new Promise(async (resolve) => {
            await axios.get(`user`)
                .then(async res => {
                    await commit('setGetUsers', res.data)
                    resolve()
                })
                .catch(err => console.log(err.response.data.message));
        })
    },

现在它就像一个魅力！

【讨论】：