所以我有这个:
var vm = new Vue({
el: '#app',
data: {
firstName: {text: null, error: null},
lastName: {text: null, error: null},
email: {text: null, error: null},
phone: {text: null, error: null},
message: {text: null, error: null},
},
…
一个这样遍历数组:
…
<li v-for="item in items">
…
但是如何在不将所有对象放入数组的情况下执行此操作?基本上,我想访问顶级数据对象。以下无效:
…
<li v-for="item in data">
…
您可以编写一个呈现数组的计算函数,并在您的vue html中使用它:
var vm = new Vue({
el: '#app',
data: {
firstName: {text: null, error: null},
lastName: {text: null, error: null},
email: {text: null, error: null},
phone: {text: null, error: null},
message: {text: null, error: null},
},
computed: {
dataArr() {
let arr = [this.firstName, this.lastName, this.email, this.phone, this.message]
return arr
}
}
…
在html部分,您可以致电:
<li v-for="item in dataArr">
计算变量动态更新,因此数据上的任何更改都将反映在计算数组中。
希望它很适合您。