使用vue-axios和laravel的数据表显示问题

Question

我正在使用jQuery数据表在Vue.js的用户组件中显示我的数据，但是当我运行代码时，它会显示数据，但其中包含一些文本，内容为“未找到数据” 。有人可以帮我弄这个吗？我真的不知道，因为我是这个前端工具的新手。

Users.vue：

<template>
  <table id="table" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Type</th>
        <th>Created</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.type }}</td>
        <td>{{ user.created_at }}</td>
      </tr>
    </tbody>
  </table>
</template>


<script>
export default {
  data() {
    return {
      users: [],
      form: new Form({
        id: "",
        name: "",
        email: "",
        password: "",
        type: ""
      })
    };
  },
  methods: {
    loadUsers() {
      axios.get("api/user").then(({ data }) => (this.users = data));
    }
  },
  created() {
    console.log("Component mounted.");
    this.loadUsers();
  }
};

$(document).ready(function() {
  $("#table").DataTable({});
});
</script>

Answer 1

可能是，您应该在从DataTable接收数据之后，更确切地说是在api方法中初始化窗口小部件then。

axios.get("api/user").then(({ data }) => {
  this.users = data;
  this.$nextTick(() => {
     $("#table").DataTable({});
  });
});

关于Vue.$nextTick的说明：

  

推迟下一个DOM更新周期后执行的回调。采用   在您更改了一些数据以等待DOM之后   更新。这与全局Vue.nextTick相同，除了   回调的this上下文会自动绑定到实例调用   这种方法。

Answer 2

axios.get("api/user").then(({ data }) => {
  this.users = data;
  $(function() {
     $("#table").DataTable({});
  });
});