为什么 vue.js 的 data 中定义的变量不能赋值给对象？答案

【问题标题】：Why can't I assign an object to a defined variable in data in vue.js？为什么 vue.js 的 data 中定义的变量不能赋值给对象？
【发布时间】：2017-10-04 14:46:09
【问题描述】：

我用这种方式，但是不渲染

this.res = Object.assign({},
   this.res, {
     "employees": [{
       "firstName": "John",
       "lastName": "Doe"
     }, {
       "firstName": "Anna",
       "lastName": "Smith"
     }, {
       "firstName": "Peter",
       "lastName": "Jones"
     }],
     'haha': 'baba',
     'papa': {
       'mimi': 'mimi'
     }
   })

【问题讨论】：

标签： vue.js

【解决方案1】：

employees 未在渲染时（创建）定义。你应该直接在data中写res对象。

【讨论】：

【解决方案2】：

不要在 get 方法中分配给对象，而是在 created 生命钩子中进行，因此 res 属性将在渲染页面之前填充数据

var vue = new Vue({
    el: "#app",
    data: function() {
        return { 
            res:{} 
        }
    },
    created: function() {
        this.res = {
             "employees": [{
               "firstName": "John",
               "lastName": "Doe"
             }, {
               "firstName": "Anna",
               "lastName": "Smith"
             }, {
               "firstName": "Peter",
               "lastName": "Jones"
             }],
             'haha': 'baba',
             'papa': {
               'mimi': 'mimi'
             }
        }
    }
})

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app" >
    <div>{{res.employees[0].firstName}}</div>
    <div>{{ res.papa.mimi}}</div>
    <div>{{ res.haha}}</div>
</div>

【讨论】：