Binding array items in Vue.js

Question

I have an arry which contains some array and proporties in it.

Now I want to iterate through the array and create new rows for each of items.

This is what I am doing.

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>

Getting the error,

[Vue warn]: Error in render: "TypeError: Cannot read property 'NAME' of undefined"

The error is self-explanatory, there is at least one undefined item in the array. — Decade Moon
– Decade Moon, Commented Sep 6, 2018 at 1:17

Decade Moon · Accepted Answer · 2018-09-06 01:28:15Z

2

Your HTML is invalid, and it seems that Vue's template compiler or DOM renderer has trouble with it: <tr> must only have <td> or <th> child elements, it cannot have text node children.

Try this instead:

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

answered Sep 6, 2018 at 1:28

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Binding array items in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related