为啥 vue.js 的 data 中定义的变量不能赋值给对象？

Posted 2023-02-22

【中文标题】为啥 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'
     
   )

【参考方案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>