使用AJAX初始化Vue數據

Question

我正在嘗試使用AJAX查詢的JsonResult中的數據填充Vue。當我從我的視圖模型對它進行編碼時，我的Vue接收數據就好了，但當我嘗試使用AJAX檢索它時，我的Vue沒有收到數據。這是我的代碼的樣子：

<script type="text/javascript"> 

     var allItems;// = @Html.Raw(Json.Encode(Model)); 

     $.ajax({ 
      url: '@Url.Action("GetItems", "Settings")', 
      method: 'GET', 
      success: function (data) { 
       allItems = data; 
       //alert(JSON.stringify(data)); 
      }, 
      error: function (error) { 
       alert(JSON.stringify(error)); 
      } 
     }); 

     var ItemsVue = new Vue({ 
      el: '#Itemlist', 
      data: { 
       Items: allItems 
      }, 
      methods: { 

      }, 
      ready: function() { 

      } 
     }); 
</script> 

<div id="Itemlist"> 
    <table class="table"> 
     <tr> 
      <th>Item</th> 
      <th>Year</th> 
      <th></th> 
     </tr> 
     <tr v-repeat="Item: Items"> 
      <td>{{Item.DisplayName}}</td> 
      <td>{{Item.Year}}</td> 
      <td></td> 
     </tr> 
    </table> 
</div> 

這是與所有適當的包括。我知道@Url.Action("GetItems", "Settings")返回正確的URL，並且數據按預期返回（通過成功函數中的警報測試（請參閱AJAX中的成功函數中的註釋）。如下所示填充它：var allItems = @Html.Raw(Json.Encode(Model));有效，但AJAX查詢不適用。我是不是做錯了什麼？

Answer 1

您可以在安裝的功能（Vuejs 1.x中的「就緒」）內進行ajax調用。

<script type="text/javascript"> 
var ItemsVue = new Vue({ 
    el: '#Itemlist', 
    data: { 
     items: [] 
    }, 
    mounted: function() { 
     var self = this; 
     $.ajax({ 
      url: '/items', 
      method: 'GET', 
      success: function (data) { 
       self.items = data; 
      }, 
      error: function (error) { 
       console.log(error); 
      } 
     }); 
    } 
}); 
</script> 

<div id="Itemlist"> 
    <table class="table"> 
     <tr> 
      <th>Item</th> 
      <th>Year</th> 
     </tr> 
     <tr v-for="item in items"> 
      <td>{{item.DisplayName}}</td> 
      <td>{{item.Year}}</td> 
     </tr> 
    </table> 
</div> 

Answer 2

你更好沃爾德需要使用

$("#Itemlist").load(yourUrl, function() { 
    alert("Load was performed."); 
}); 

請查看更多here

Answer 3

我能夠通過對AJAX成功處理程序中執行我的必要行動，以解決我的問題你可以把整個Vue對象創建在那裏，或者只是設置你需要的數據。

Answer 4

還有另一種方法：

new Vue({ 
el:"#app", 

data:{ 
    populateByAjax:{} 

}, 

beforeCompile: function() { 
    this.getRequestByAjax(); 
}, 
methods:{ 
getRequestByAjax:function(){ 
     var xhr = new XMLHttpRequest(); 
     var args = "action=lol"; 
     var self = this; 

     xhr.open('POST', './filephp', true); 
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

     xhr.onready = function (aEvt) { 
      if(xhr.readyState == 4 && xhr.status==200) { 
       self.populateByAjax = JSON.parse(xhr.responseText); 
       console.log(self.populateByAjax); 
      } 
     } 
     xhr.send(args); 
    } 
} 

而且不要忘記完成你的*。PHP文件有：

echo json_encode($result);