在Vue3.0中練習資料呈現以下圖片形式(此為黑馬程序員的課程範例):
但我的沒辦法輸出資料 , 如下:
確認F12 裡面的數組可以顯示 , 應該可以證明資料沒問題吧?(如下):
請問是我的程式碼哪裡有問題嗎?
以下為原碼: Vue
<script setup>
import { affixProps } from 'element-plus';
let tableData = [];
let getData = function () {
axios.get('./person.json')
.then(function (result) {
tableData = result.data.results;
console.log(tableData);
})
}
let onSubmit = function () {
console.log("查詢")
}
let formInline
</script>
<template>
<div class="common-layout">
<el-container style="height: auto; border: 1px;">
<el-header>智能教育系統</el-header>
<el-container>
<el-aside width="200px">
<el-scrollbar>
<el-menu :default-openeds="['1', '3']">
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="1-1">
<router-link to="/deptView">deptList</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/empView">empList</router-link>
</el-menu-item>
</el-menu-item-group>
</el-menu>
</el-scrollbar>
</el-aside>
<el-main>
<!-- 表單 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="Approved by">
<el-input v-model="formInline" placeholder="Approved by" clearable />
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="formInline" placeholder="Activity zone" clearable>
<el-option label="female" value="shanghai" />
<el-option label="male" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-date-picker v-model="formInline" type="date" placeholder="Pick a date" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
<el-button type="primary" @click="getData">getData</el-button>
</el-form-item>
</el-form>
<!-- 表格 -->
<el-scrollbar>
<el-table :data="tableData">
<el-table-column prop="id.name" label="ID" />
<el-table-column prop="name.first" label="Name" />
<el-table-column prop="gender" label="Gender" />
<el-table-column prop="location.country" label="Address" />
</el-table>
</el-scrollbar>
</el-main>
</el-container>
</el-container>
</div>
</template>
<style scoped></style>