Vue.js: v-repeat 没有从 JSON 数组获取数据

Question

我有一个 JSON 项数组，我正在尝试使用 v-repeat 将其输出为一系列 table 行：

<tr v-repeat="items">
    <td>{{code}} </td>
    <td> {{description}}</td>
    <td>
        {{price}}
    </td>
    <td><input v-model="quantity" type="text" size="4"/></td>
    <td> {{total = price * quantity}}</td>
</tr>

JSON 中的每个项目都会输出一行空单元格 - 所以 Vue.js 没有获得属性值，即使我已经确认它们确实存在如果我这样做，我可以获得 v-repeat 中的值：

{{items[$index].code}}

我没有收到任何错误或警告。

这是我的 Vue 数据对象的 JSON 输出：

{ "items":[{
    "id": "408",
    "product_id": "6",
    "description": " item description here... ",
    "price": "1210.26",
    "created_at": "2015-06-04 15:10:14",
    "updated_at": "2015-06-04 15:10:14",
    "quote_id": "32",
    "quantity": "1",
    "code": "PI0055"
}]}

Answer 1

你的代码对我来说工作正常：

var data = {
    "items":[{
        "id": "408",
        "product_id": "6",
        "description": " item description here... ",
        "price": "1210.26",
        "created_at": "2015-06-04 15:10:14",
        "updated_at": "2015-06-04 15:10:14",
        "quote_id": "32",
        "quantity": "1",
        "code": "PI0055"
    }]
};

var vue = new Vue({
    el: '#tbl',
    data: data
});

<table id="tbl" border="1">
    <tr v-repeat="items">
        <td>{{code}} </td>
        <td>{{description}}</td>
        <td>{{price}}</td>
        <td><input v-model="quantity" type="text" size="4"/></td>
        <td>{{total = price * quantity}}</td>
    </tr>
</table>
<script src="http://vuejs.org/js/vue.min.js"></script>

Answer 2

我没有初始化数据对象：

data: {items: []}

简单的错误 - 但事实上没有给出错误，而且您仍然可以通过某些方式访问数据这一事实使得很难弄清楚。

Answer 3

这会是什么

data: {items: []}

放在你的代码里？顶部、底部、中间？没有位置，就没有解决方案。

Vue.js: v-repeat 没有从 JSON 数组获取数据

Vue.js: v-repeat not getting data from JSON array

javascript

vue.js