the project structure is the original demo, built by vue-cli. The purpose of the demo, is to test the component development of vue + element-ui and to use it in the background development.
expectation:
the parent component loads each child component (independent module) and shows that each child component invokes api, to get the data and renders the View, and then renders it in the parent component.
question:
The question is reduced to why I call initApiData () in created to update the data, and the table data remains the same?
<template>
<el-container>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="" width="140">
</el-table-column>
<el-table-column prop="name" label="" width="120">
</el-table-column>
<el-table-column prop="address" label="">
</el-table-column>
</el-table>
</el-main>
</el-container>
</template>
<script>
//import Users from "@/components/user/Users"
export default {
name: "Home",
data () {
const item = {
date: "2016-05-02",
name: "",
address: " 1518 "
}
return {
tableData: Array(20).fill(item),
tableData2: Array(1).fill(item)
}
},
methods: {
initApiData: function () {
let that = this
console.log("change data...")
that.tableDate = that.tableData2
console.log(that.tableData2)
}
},
created: function () {
console.log("created...")
this.initApiData()
}
}
</script>