用v-for迭代Vue js中$ data的最佳方法是什么?

问题描述 投票:0回答:1

所以我有这个:

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.js
1个回答
1
投票

您可以编写一个呈现数组的计算函数,并在您的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">

计算变量动态更新,因此数据上的任何更改都将反映在计算数组中。

希望它很适合您。

© www.soinside.com 2019 - 2024. All rights reserved.