从 vue js 解析 html 中的 json

Question

我是 Vue js 的新手。

我正在尝试使用

将 json 解析到 html 表中

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

但表格打印空行。 如果我尝试打印

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

然后每行打印json的单个字符。

我的 json : "{id: 'mu'}"

here is the screenshot of the table that prints single character

我错了。拜托，一点指导会有所帮助。

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

})

Answer 1

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

})