Vue使用jQuery ajax加载数据页面无显示解决方法

最新推荐文章于 2022-12-03 13:33:03 发布

qq_1959227206

最新推荐文章于 2022-12-03 13:33:03 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： error

本文链接：https://blog.youkuaiyun.com/yjt520557/article/details/83307665

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在Vue中使用异步加载数据的方法，通过设置ajax请求的async属性为false，确保了数据在页面渲染前已加载完成，解决了数据加载与页面渲染不同步的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无数据代码为

<script>

    new Vue({
        el:"#demo",
        data:{list:find()}
    })


   function find(){
     var ss;
        $.ajax({
            type: "post",
            url: "studentaction.action?methodName=findallStudent",
            dataType: "json",
            success: function(msg){
                ss=msg;
                console.log(msg)
            }
        })
       return ss;
    }


</script>

<table id="demo" lay-filter="test">
    <tr v-for="item in list" :key="item.id">
        <td>{{item.name}}</td>
    </tr>
</table>

我们可以看到右下角数据是已经加载出来了的，但是页面上却没有显示

我们至于要加入一行代码 async: false,让ajax先执行即可

 function find(){
     var ss;
        $.ajax({
            type: "post",
            url: "studentaction.action?methodName=findallStudent",
            dataType: "json",
            async: false,//让ajax先执行
            success: function(msg){
                ss=msg;
                console.log(msg)
            }
        })
       return ss;
    }