Vue3+Laravel控制台有数据但DataTable无法渲染问题求助

我是Laravel与Vue.js的新手，目前尝试使用DataTable展示数据。在onMounted钩子中通过console.log能正常获取到接口返回的数据，但页面表格却显示无数据。

控制器代码 #

public function index()
{
    $landing = Landing::all();
    return response()->json([
        'success' => true,
        'message' => 'List Data Post',
        'data' => $landing
    ], 200);
}

Vue脚本代码 #

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';

let landings = ref([])

onMounted(() => {
   axios.get('/api/adminLanding')
   .then(response => {
      landings.value = response.data.data
      console.log(landings)
   }).catch(error => {
      console.log(error.response.data)
   })
})
</script>

表格tbody代码 #

<tbody>
   <tr v-for="(landing, index) in landings" :key="index">
      <td>{{ landing.name }}</td>
      <td>{{ landing.updated_at }}</td>
      <td>{{ landing.admin }}</td>
   </tr>
</tbody>

控制台输出 #

RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: Array(1), _value: Proxy(Array)}
dep
:
Set(0) {w: 0, n: 0, size: 0}
__v_isRef
:
true
__v_isShallow
:
false
_rawValue
:
Array(1)
0
:
admin: "Yaa"
created_at: "2023-03-03T07:22:34.000000Z"
id: 6
image: "20230303142234.jpg"
name: "Buthuk"
updated_at: "2023-03-03T07:22:34.000000Z"
[[Prototype]]: Object
length: 1
[[Prototype]]: Array(0)
_value: Proxy(Array) {0: {…}}
value: (...)
[[Prototype]]: Object

排查与解决方法 #

1. 处理DataTable初始化时机问题 #

如果用的是第三方DataTable插件（比如jQuery DataTables），它默认在页面加载时初始化表格，而你的数据是异步获取的，此时表格已经渲染完成，不会自动识别新数据。解决方式：
在数据获取完成后，重新初始化或刷新DataTable：

<script setup>
import axios from 'axios';
import { onMounted, ref, nextTick } from 'vue';

let landings = ref([])

onMounted(() => {
   axios.get('/api/adminLanding')
   .then(response => {
      landings.value = response.data.data
      nextTick(() => {
        // 假设表格的id是datatable
        const table = document.querySelector('#datatable')
        if (table) {
          // jQuery DataTables的刷新方式
          $(table).DataTable().destroy()
          $(table).DataTable()
        }
      })
   }).catch(error => {
      console.log(error.response.data)
   })
})
</script>

2. 验证Vue响应式渲染状态 #

在模板中添加调试代码，确认Vue是否正确识别到数据：

<div>当前数据条数：{{ landings.length }}</div>

如果显示1，说明数据已被Vue接收，问题出在DataTable的更新机制；如果显示0，检查response.data.data是否确实是数组结构。

3. 核对模板变量一致性 #

确认模板中v-for遍历的landings和脚本中定义的ref变量名完全一致，这部分代码看起来没问题，但可以再仔细核对字段名（比如landing.name、landing.admin是否和接口返回的字段完全匹配）。

内容的提问来源于stack exchange，提问作者yaa