vue hooks怎么返回异步数据到template？

  • Z时代
  • 2024-02-07
  • 分类：IT

问题

vue hooks怎么返回异步数据到template？

代码

hooks

import { reactive } from 'vue'
import axios from 'axios'
export default function () {
  let tableData = reactive()
  const getData = async () => {
    const res = await axios.get('https://cnodejs.org/api/v1/topics')
    tableData = res.data.data
    console.log('tableData', tableData)
  }
  return { tableData, getData }
}

组件

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id" width="180" />
    <el-table-column prop="title" label="标题" width="180" />
    <el-table-column prop="create_at" label="create_at" />
  </el-table>
</template>
<script setup>
import { onMounted } from 'vue'
import useTable from '../../hooks/useTable'
const { tableData, getData } = useTable()
onMounted(async () => {
  await getData()
})
</script>

数据返回了，但是没有显示在template上

vue hooks怎么返回异步数据到template？

回答：

tableData = res.data.data;
这一串代码你知道什么意思吗？你把一个指向响应式的变量改变指向了一个字符串还是别的对象，让这个tableDate这个变量失去了响应式。你应该修改成这样：

import { reactive } from "vue";
import axios from "axios";
export default function () {
  let tableData = reactive({ tableData: [] });
  const getData = async () => {
    const res = await axios.get("https://cnodejs.org/api/v1/topics");
    tableData.tableData = res.data.data;
    console.log("tableData", tableData);
  };
  return { tableData, getData };
}

或者这样：

import { ref } from "vue";
import axios from "axios";
export default function () {
  let tableData = ref([]);
  const getData = async () => {
    const res = await axios.get("https://cnodejs.org/api/v1/topics");
    tableData.value = res.data.data;
    console.log("tableData", tableData);
  };
  return { tableData, getData };
}

请你牢记！！不要不要不要不要改变响应式变量的指向！！！！！！！！！！

以上是 vue hooks怎么返回异步数据到template？ 的全部内容， 来源链接： utcz.com/p/935304.html

回到顶部