Après avoir cliqué sur le bouton dans le code suivant, le contenu du tableau app.items2 change et le deuxième ul est également rendu en li, mais le item.message dans items2 n'est pas rendu. Pourquoi cela et comment le résoudre. ?
<!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] Démarrage rapide de 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));
La méthode splice renvoie un tableau
push accepte des paramètres de longueur variable
Vous pouvez utiliser la méthode concat
this.items2 = this.items2.concat(this.items.splice(0 , 1) );