1. 程式人生 > >Vue使用jQuery ajax載入資料頁面無顯示解決方法

Vue使用jQuery ajax載入資料頁面無顯示解決方法

無資料程式碼為 

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