After clicking the button in the following code, the content of the app.items2 array changes, and the second ul is also rendered into a li, but the item.message in items2 is not rendered. Why is this and how to solve it?
<!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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://developer.mozilla.org...
https://jsfiddle.net/ycloud/n...
this.items2.push(...this.items.splice(0, 1));
The splice method returns an array
push accepts variable length parameters
You can use the concat method
this.items2 = this.items2.concat(this.items.splice(0, 1));