Связывание элементов массива в Vue.js - PullRequest
Новая
       6

Связывание элементов массива в Vue.js

0 голосов
/ 06 сентября 2018

У меня есть arry, который содержит некоторый массив и пропорции.

Теперь я хочу перебрать массив и создать новые строки для каждого из элементов.

Это то, что я делаю. 

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]: ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство 'NAME' из неопределенного"

1 Ответ

0 голосов
/ 06 сентября 2018

Ваш HTML-код недействителен, и, похоже, с этим связаны проблемы с компилятором шаблонов Vue или средством визуализации DOM: <tr> должен иметь только <td> или <th> дочерние элементы, он не может иметь дочерних элементов текстового узла.

Попробуйте вместо этого: 

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