Vue.js：v-repeat 没有从 JSON 数组中获取数据答案

【问题标题】：Vue.js: v-repeat not getting data from JSON arrayVue.js：v-repeat 没有从 JSON 数组中获取数据
【发布时间】：2015-08-22 13:11:41
【问题描述】：

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

<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"
}]}

【问题讨论】：

标签： javascript vue.js

【解决方案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>

【讨论】：

谢谢，在看到你的回答之前我意识到我没有初始化数据对象！

【解决方案2】：

我没有初始化数据对象：

data: {items: []}

简单的错误 - 但没有给出错误的事实，以及您仍然可以以某些方式访问数据的事实使得弄清楚这一点很棘手。

【讨论】：

【解决方案3】：

会这样吗

data: {items: []}

被放置在你的代码中？上、下、中？没有位置，就没有解决方案。

【讨论】：