vue往数组中添加元素_vuejs给数组添加元素

代码是这样的：

<script>

var vm = new Vue({

el: "#app",

data: {

items: [{

id:1,

message: 'Apple',

selected: false,

num: 1,

price: 5

}, {

id:2,

message: 'Peach',

selected: true,

num: 1,

price: 10

}, {

id:3,

message: 'Orange',

selected: true,

num: 1,

price: 15

}, {

id:4,

message: 'Pear',

selected: true,

num: 1,

price: 20

}]

}

});

</script>

上面是demo，填写了些数据，实际使用的时候，items里面的数据是从后台ajax请求数据库中读取出来的，并且，没有

selected

字段，因为数据库中不需要保存，它是表示复选框是否被选中的字段。

也就是这样的：

<script>

var vm = new Vue({

el: "#app",

data: {

items: []

},

created() {

var goods=this;

this.$http.get('/cart').then((response) => {

goods.items=response.data;

}, (response) => {

// error callback

});

}

});

</script>

想达到的效果：

我想在每次ajax请求后，都给这个数组中的每个对象都添加一个

selected: false

，用

vm.$set( keypath, value )

可以吗？http://vuejs.org.cn/api/#vm-set 怎么做呢？

for(let i in goods.items){

goos.items[i]['selected'] = false

}

我是这么处理的，你可以试下~

items.map(function(item){

item.selected = false;

})

首先最好不要把data直接赋值给items，这是引用赋值，虽然数据是远程的没什么问题，但不太合理。

第二，es6的

=>

函数体里的this就是编码环境里的this，所以不需要通过goods来传递this。

你这个需求最好的做法，我认为是在拿到数据之后，遍历response.data, 然后依次push 进 this.items数组，那么在push的过程中你也可以为对象设置selected了。

不要先赋值给items再往里添加属性，不然可能会导致不被监测到，视图不刷新

var data=response.data;

for(var i in data){

data[i].selected=false;

}

this.items=data;