CODEWITHSUNDEEP
jqueryhtmlvue.js
Muneeb
Muneeb

Reputation: 15

parse json in html from vue js

I am new to Vue js.

I am trying to parse json into the html table with 

<tr v-for="(item) in products">
   <td>{{item.id}}</td>
</tr>

but the table prints empty rows. and if i try to print 

<td>{{item}}</td>

then each row print single character of the json.

my json : "{id: 'mu'}"

here is the screenshot of the table that prints single character

where I am wrong. Please, a little guidance would help. 

var app4 = new Vue({
el: '#Itemlist',
data: {
    products: []
},

mounted: function (){
    var self = this;
    $.ajax ({
        url: "getAll",
        method: "GET",
        success: function (data) {
            self.products = "{id: 'mu'}";
        },
        error: function(error) {
            console.log(error)
        }
    });
}

})

Upvotes: 0

Views: 1028

Answers (1)

Chris Dixon
Chris Dixon

Reputation: 9167

var app4 = new Vue({
el: '#Itemlist',
data: {
    products: []
},

mounted: function (){
    var self = this;
    $.ajax ({
        url: "getAll",
        method: "GET",
        success: function (data) {
            // this is your issue
            //self.products = "{id: 'mu'}";

            self.products.push({id: 'mu'});
        },
        error: function(error) {
            console.log(error)
        }
    });
}

})

Upvotes: 1

Related Questions