Vue 3 Element-Plus table could not show axios result when I use script set up-CodePudding

I am using vue 3 (setup) element plus table axios to render table data.However, I get the data in api result but it never shows to the table view.

I would like to use new script-setup.

I think it is not related to element-plus and tableData is not responsive in my code. but I am not sure how to declare it in this condition.

My Vue file:

<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>

Update

It seems that I need to use some nested structure like:

let tableData = reactive({
    arr:[]//store the table data here
})

And use tableData.arr at anywhere I need to use the data.Why it designs like that?

As xigua2022 said that I could also use ref instead and it does work.

CodePudding user response：

let tableData = reactive([]); -> let tableData = ref([]); tableData = res.data; -> tableData.value = res.data;