Vue3 使用 Axios 调用接口并为表格数据赋值 - 完整教程

使用axios库来调用接口，并将返回的数据赋值给表格数据data。\n\n首先，需要安装axios库：\n\n\nnpm install axios\n\n\n然后，在组件的setup函数中引入axios库，并定义data变量：\n\njavascript\nimport { reactive } from 'vue';\nimport axios from 'axios';\n\nexport default {\n setup() {\n const data = reactive({\n tableData: []\n });\n\n // 调用接口并赋值给表格数据\n const getIndexApi = async () => {\n try {\n const response = await axios.get('your-api-url');\n data.tableData = response.data;\n } catch (error) {\n console.error(error);\n }\n };\n\n getIndexApi(); // 在组件加载时调用接口\n\n return {\n data\n };\n }\n}\n\n\n在上述代码中，通过reactive函数将data对象变成响应式的，这样当tableData属性的值发生变化时，组件会自动重新渲染。\n\n在getIndexApi函数中，使用axios.get方法发送GET请求到指定的接口URL，并将返回的数据赋值给data.tableData属性。\n\n最后，在组件的模板中可以通过data.tableData来访问表格数据。\n\nhtml\n<template>\n <table>\n <tr v-for="item in data.tableData" :key="item.id">\n <td>{{ item.name }}</td>\n <td>{{ item.age }}</td>\n ...\n </tr>\n </table>\n</template>\n