Vue.js：V-重複不是從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

我沒有初始化的數據對象：

data: {items: []} 

簡單的錯誤 - 但是沒有給出錯誤，而且您仍然可以以某種方式訪問​​數據這一事實很難弄清楚。

Answer 2

您的代碼工作正常，我：

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 3

並且將這個

data: {items: []} 

被放置在您的代碼？頂部，底部，中間？沒有位置，沒有解決方案。