Vue遍历问题

Question

问题描述

我使用jquery获得数据为Vue的data赋值，赋值是成功的。但是使用v-for遍历显示不出数据。

问题出现的环境背景及自己尝试过哪些方法

Vue+bootstrap+jquery

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
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>

你期待的结果是什么？实际看到的错误信息又是什么？

显示效果是这样：

Answer 1

chara.items = json;要改成data.result吧，v-for要的是一个数组，你给个字符串(JSON.stringify后)，明显不对的

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

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

另外，用vue就别用jquery了，取数据用axios吧，这样合适很多

Answer 2

让items的初始值跟你回调的值一致，是对象就赋个空对象，是数组就赋个空数组

然后，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'
      )
    },
  })