代码之家  ›  专栏  ›  技术社区  ›  Simsons

绑定中的数组项虚拟用户.js

  •  1
  • Simsons  · 技术社区  · 6 年前

    这就是我要做的。

    var orderDetails = [{
            "ID": "1",
            "NAME": "Item1",
            "Orders": [
                "ORD001"
            ],
            "Purchases": [
                "RhynoMock",
                "Ember"
            ],
            "ISENABLED": "false"
        },
        {
            "ID": "2",
            "NAME": "Item2",
            "Orders": [
                "ORD002",
                "ORD008"
            ],
            "Purchases": [
                "StufferShop"
            ],
            "ISENABLED": "false"
        }
    ];
    
    var app = new Vue({
        el: '#ordersDiv',
        data: {
            allOrders: orderDetails
        }
    });
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="ordersDiv">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="order in allOrders">{{ order.NAME }}</tr>
        </table>
    
    </div>

    得到错误,

    [Vue warn]:呈现时出错:“TypeError:无法读取未定义的属性'NAME'”

    1 回复  |  直到 6 年前
        1
  •  2
  •   Decade Moon    6 年前

    您的HTML无效,而且Vue的模板编译器或DOM呈现程序似乎有问题: <tr> 必须只有 <td> <th>

    <tr v-for="order in allOrders">
      <td>{{ order.NAME }}</td>
    </tr>