鍍金池/ 問答/HTML/ Vue遍歷問題

Vue遍歷問題

問題描述

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

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

Vue+bootstrap+jquery

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
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'    
)

})
這個是js代碼

下面是jsp頁面的代碼
<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é)果是什么？實際看到的錯誤信息又是什么？

顯示效果是這樣：

clipboard.png

clipboard.png

回答
編輯回答
法克魷

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

$.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)的值一致，是對象就賦個空對象，是數(shù)組就賦個空數(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