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>
伊谢尔伦2017-05-19 10:23:07
Array.prototype.splice() Return value An array composed of deleted elements. If only one element was removed, an array containing only one element is returned. If no elements were removed, an empty array is returned.
https://developer.mozilla.org...
this.items2.push(this.items.splice(0, 1)[0]);https://jsfiddle.net/ycloud/n...
黄舟2017-05-19 10:23:07
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));