在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ Vue遍歷問(wèn)題

Vue遍歷問(wèn)題

問(wèn)題描述

我使用jquery獲得數(shù)據(jù)為Vue的data賦值，賦值是成功的。但是使用v-for遍歷顯示不出數(shù)據(jù)。

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

Vue+bootstrap+jquery

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）
var chara = new Vue({

el:"#container",
data:{
    items:"",
},

})
$(function(){

$.post(
    "/Project_web/chara/getAllData",
    function(data){
        var json = JSON.stringify(data.result);
        chara.items = json;
        alert(chara.items);
    },
    'json'    
)

})
這個(gè)是js代碼

下面是jsp頁(yè)面的代碼
<tbody>

<tr v-for="item in items">
<td>{{item.id}}</td>
<td>{{item.charName}}</td>
<td>{{item.charType}}</td>
<td>{{item.charDescrible}}</td>
<td>{{item.charStatus}}</td>
<td></td>
</tr>

</tbody>

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

顯示效果是這樣：

clipboard.png

clipboard.png

回答
編輯回答
法克魷

chara.items = json;要改成data.result吧，v-for要的是一個(gè)數(shù)組，你給個(gè)字符串(JSON.stringify后)，明顯不對(duì)的

$.post(
    "/Project_web/chara/getAllData",
    function(data){
        chara.items = data.result;
    },
    'json'    
)
el:"#container",
data:{
    items:[],
},

另外，用vue就別用jquery了，取數(shù)據(jù)用axios吧，這樣合適很多

2018年2月17日 13:24
編輯回答
哎呦喂

讓items的初始值跟你回調(diào)的值一致，是對(duì)象就賦個(gè)空對(duì)象，是數(shù)組就賦個(gè)空數(shù)組

然后，vue有自己的生命周期鉤子，用vue就不要用jquery那套了

 var chara = new Vue({
    el: "#container",
    data: {
      items: [],
    },
    created() {
      $.post(
        "/Project_web/chara/getAllData",
        function(data){
          var json = JSON.parse(data.result)
          chara.items = json;
          alert(chara.items);
        },
        'json'
      )
    },
  })
2018年3月15日 03:00