下段程式碼中點選button後，app.items2數組內容發生變化，第二個ul裡也被渲染進一個li，但是items2內的item.message 缺沒有渲染出來，請問是為什麼，怎麼解決？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<p id="example-1">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<ul>
<li v-for="item in items2">{{ item.message }}</li>
</ul>
<button @click="aaa">移动</button>
</p>
<script src="http://vuejs.org/js/vue.js"></script>
<script>
var app = new Vue({
el: '#example-1',
data: {
items: [{
message: 'Foo'
}, {
message: 'Bar'
}],
items2: []
},
methods: {
aaa: function() {
this.items2.push(this.items.splice(0, 1));
}
}
})
</script>
</body>
</html>
https://developer.mozilla.org...
https://jsfiddle.net/ycloud/n...
this.items2.push(...this.items.splice(0, 1));
splice方法回傳一個陣列
push接受不定長參數
可以使用concat方法
this.items2 = this.items2.concat(this.items.splice(0, 1));