vue.js v-for not printing out on html

Question

please i'll appreciate some help with this issue am facing on my vuejs frontend.

This is my js(vue) logic

new Vue({
    el: '#products',
    data () {
        return {
            products: {}
        }
    },
    methods: {
        getProducts: function() {
            axios.get(serviceBase + 'products')
            .then(function (response) {
                this.products = response.data.data
            })
            .catch(function (error) {
                console.log(error)
            })
        }
    },
    created: function() {
        this.getProducts()
        var p = this.products
    }
})

and then the html

<div class="table-responsive" id="products">
                            <table class="table table-hover">
                                <thead>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Category</th>
                                    <th>Description</th>
                                    <th>Color</th>
                                    <th>Price</th>
                                    <th>Actions</th>
                                </thead>
                                <tbody>
                                    <template v-for="(prod, index) in products">
                                        <tr>
                                            <td>{{index+1}}</td>
                                            <td>{{prod.prod_name}}</td>
                                            <td>{{prod.cat_name}}</td>
                                            <td>{{prod.prod_descrip}}</td>
                                            <td>{{prod.prod_color}}</td>
                                            <td>&#8358;{{prod.prod_price}}</td>
                                            <td></td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>

But then the products json array is not printing out on the table, please is there something am doing wrong?

I don't think you don't need a template tag unless this is a `.vue` file. and if it is, your `template` need to be the root element. — Get Off My Lawn, May 19 '18 at 14:31
@dipp it's because you're trying to iterate an object with v-for (`products: {}`) — Sovalina, May 19 '18 at 14:36
add some console.logs or debug after the service response to see if the data really come — af costa, May 19 '18 at 14:41
@afcosta i know but like that `v-for="(prod, index) in products"` , the OP obviously wants to iterate an array — Sovalina, May 19 '18 at 14:43
yeah on objects the second parameter is obiously not the index — af costa, May 19 '18 at 14:48
@afcosta yes i console logged and the data appeared in the console — dipp, May 19 '18 at 17:23
@sovalina do you mean i should change the value of products in the data() to an array? — dipp, May 19 '18 at 17:25
@Bert why did you mark this as a duplicate, i searched and couldn't find anything similar to my issue. If there is, kindly comment with the link. — dipp, May 19 '18 at 17:28
@GetOffMyLawn i tried adding :key="index" but still didn't work. — dipp, May 19 '18 at 17:28
I closed this as a duplicate because, despite all the comments, the primary problem here is that the context inside your axios callback is not the same as the Vue and therefore, `this.products = response.data.data` fails. The question I made this a duplicate of goes into detail how to solve that problem. Here is some code that demonstrates my point. https://codepen.io/Kradek/pen/odJVEB?editors=1010 — Bert, May 19 '18 at 18:23
@Bert i see, that actually solved the problem. Thank you very much. — dipp, May 19 '18 at 18:55

vue.js v-for not printing out on html

0 Answers0