Vue.js 中更新 data 里的值后（数组对象），如何在页面实时显示？

[s609926202]

示例代码如下：

<div id="app">
    <i-table stripe :columns="columns1" :data="data1"></i-table>
    <page :total="100" :current="1" @on-change="change"></page>
</app>

<script>
new Vue({
	el: '#app',
	data: {
    	columns1: [
        	{
            	title: 'ID',
                key: 'id'
            },
            
        	{
            	title: 'Title',
                key: 'title'
            }
        ],
        data: []
    },
    mounted: function(){
    	this.data = this.setData();
    },
    methods: {
    	setData: function(){
        	return [
                {
                    id: '1',
                    title: 'Title'
                },
                {
                    id: '2',
                    title: 'Title2'
                },
                {
                    id: '3',
                    title: 'Title3'
                }
            ];
        },
        change: function(current) {
        	self.data = [
            	{
                    id: '4',
                    title: 'Title4'
                },
                {
                    id: '5',
                    title: 'Title5'
                },
                {
                    id: '6',
                    title: 'Title6'
                }
            ];
        }
    }
});
</script>

就是点击分页按钮，出发 change 方法。但是页面上还是原来的数据，并没有改变，难道数组类似的 data 和字符串或者整型类似的不一样吗？

[chainmon]

在模板文件里面写个 created 吧，不要在 app.vue 里面写

[allce231]

:data="data1" 大兄弟你这里哪有 data1 啊

[lovedebug]

怎么感觉你变量名写错了?

[s609926202]

@allce231 呃，编辑的时候没注意，这个小问题不要纠结，你知道这个是 data 里的 data 其实就是 data1 就是了、、

[s609926202]

@lovedebug 机智，，刚刚又检查了一次源码，，变量写错了 //

[s609926202]

此帖完结，楼主心大、、