最近在后端和前端之前切换开发,头搞晕了,连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的会自动更新视图。