最近在后端和前端之前切换开发,头搞晕了,连js最基本的知识都迷糊了。在vue开发中想对json中没有的对象添加一个新的元素。

js往对象中添加元素

比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre。做法如下:

var jsonObj={
    'param1':22,
    'param2':33
};

jsonObj.newParam = 'pre';  或者  jsonObj['newParam'] = 'pre';

新的属性添加以后,json对象变成:

var jsonObj={
    'param1':22,
    'param2':33,
    'newParam':'pre'
};

js将数组元素添加到对象

//js将数组元素添加到对象中(或 数组转换成对象)有个小技巧:

var obj = {}; 
[].push.apply(obj,[11,22,33,44,55,66]);
console.log(obj); //{0:11,1:22,2:33,3:44,4:55,5:66,length:6}

由于obj是个对象没有像数组的push()方法,所以利用数组的push()以及apply()的特性来将数组作用于push()并修改当前的引用。有较严重的代码洁癖的患者可以使用这个方法。

js对像添加元素后 vue不刷新视图的问题

如果json修改后vue视图不刷新的问题,我们可以用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上来处理。数组的部分操作会自动更新刷新>> vue 数组数据不更新响应。还有一种处理方法是直接把修改后的数组复制到引用的数组上,也可刷新视图。

例如:

var dataPage = res.data.layout
if(typeof(dataPage.templateType) == 'undefined') {
    dataPage['templateType'] = res.data.type
    dataPage['direction'] = 0
}
this.pageList = [dataPage]

上面的实例是如果dataPage某些元素不存在,则动态添加并赋值,然后传给pageList。vue页面使用pageList的会自动更新视图。