我正在使用 vue 3 (setup) element plus table axios 來呈現表資料。但是，我在 api 結果中獲取了資料，但它從未顯示到表視圖中。
我想使用新的script-setup.
我認為它與 element-plus 無關，并且tableData在我的代碼中沒有回應。但我不確定如何在這種情況下宣告它。
我的 Vue 檔案：
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="250">
</el-table-column>
<el-table-column prop="type" label="Type" align="center" width="150">
</el-table-column>
<el-table-column prop="description" label="Desc" align="center" width="180">
</el-table-column>
<el-table-column prop="income" label="Income" align="center" width="170">
</el-table-column>
<el-table-column prop="expend" label="Expand" align="center" width="170">
</el-table-column>
<el-table-column prop="cash" label="Cash" align="center" width="170">
</el-table-column>
<el-table-column prop="remark" label="Remark" align="center" width="220">
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
import { reactive,getCurrentInstance } from "vue";
interface Profile {
date: string,
description: string,
expend: string,
income: string,
type: string,
remark: string
}
const app = getCurrentInstance();
let tableData:Profile[] = reactive([]);
const getAllProfile = () => {
app.appContext.config.globalProperties.$axios
.get("/api/profiles")
.then((res) => {
tableData= res.data;
console.log(tableData);//show data successfully in console
})
.catch((err) => {
console.log(err);
});
};
getAllProfile();
</script>
更新
看來我需要使用一些嵌套結構，例如：
let tableData = reactive({
arr:[]//store the table data here
})
并tableData.arr在我需要使用資料的任何地方使用。為什么要這樣設計？
正如 xigua2022 所說，我也可以使用ref它，它確實有效。
uj5u.com熱心網友回復：
讓 tableData = reactive([]); -> 讓 tableData = ref([]); 表資料 = res.data; -> tableData.value = res.data;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/418947.html
標籤：