javascript - Vue.js:v-repeat 未从 JSON 数组获取数据

Question

我有一个 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"
}]}

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>