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

1👍

I did not initialize the data object:

data: {items: []}

Simple mistake – but the fact that no errors are given, and the fact that you can still access the data in certain ways makes it tricky to figure out.

👤HPage

1👍

Your code works fine for me:

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>
👤poke

0👍

And were would this

data: {items: []}

be placed in your code? Top, bottom, middle? Without the location, there’s no solution.

Leave a comment