Selepas mengklik butang dalam kod berikut, kandungan tatasusunan app.items2 berubah, dan ul kedua juga diberikan kepada li, tetapi item.message dalam item2 tidak dipaparkan Mengapa ini dan cara menyelesaikannya ?
<!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] Permulaan pantas Node.js](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));
Kaedah splice mengembalikan tatasusunan
push menerima parameter panjang berubah-ubah
Anda boleh menggunakan kaedah concat
this.items2 = this.items2.concat(this.items.splice(0, 1));