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

您的代码适用于我：

＆＃13;

set1.setColor(colorTemplate.VORDIPLOM_COLORS);

＆＃13;

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
});

＆＃13;

Answer 2

我没有初始化数据对象：

data: {items: []}

简单的错误 - 但事实上没有给出任何错误，以及您仍然可以以某种方式访问数据的事实使得弄清楚它很难。

Answer 3

这是不是

data: {items: []}

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

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

3 个答案: