使用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);