javascript - v-for中无法获取push进来的数据？
本文介绍了javascript - v-for中无法获取push进来的数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
下段代码中点击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>
<div 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>
</div>
<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>
解决方案
Array.prototype.splice() 返回值 由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
https://developer.mozilla.org...
this.items2.push(this.items.splice(0, 1)[0]);https://jsfiddle.net/ycloud/n...
这篇关于javascript - v-for中无法获取push进来的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
