Vue子组件api获取数据加载不进来？

Question

项目结构就是原始的vue-cli 构建的demo, 目的就是想测试下vue + element-ui的组件式开发， 想用在后台开发中。

期望：

父组件加载各个子组件(独立模块)并显示， 每个子组件中自行调用api， 获取数据并渲染View， 然后能在父组件中呈现。

问题：

问题简化为为啥我在created中调用initApiData() 更新了数据， 表格数据依旧不变化呢？

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

Answer 1

不应该啊，data对象的属性都是响应式的，只要重新赋值就会触发setter，进而引发view中的依赖更新，再找找原因……

Answer 2

App.vue中template有没有用懒加载keep-alive，如果有再次进来是不会执行这个函数的，如果没有用懒加载，确定函数是有执行（可以在initApiData函数里打印一个console.log(‘initApiData’)）并且在执行后打印tableData有数据的话，就用$set强行渲染吧。。。

Answer 3

大哥这里写错了: 'that.tableDate = that.tableData2 that.tableDate' tableDate => tableData