Inicjowanie danych Vue za pomocą AJAX

Question

Próbuję wypełnić Vue danymi z JsonResult zapytania AJAX. Moja Vue odbiera dane po prostu dobrze, gdy koduję je z mojego Modelu widoku, ale nie wtedy, gdy próbuję go pobrać przy użyciu AJAX. Oto, jak wygląda mój kod:

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

Jest to ze wszystkimi właściwymi załącznikami. Wiem, że @Url.Action("GetItems", "Settings") zwraca poprawny adres URL, a dane wracają zgodnie z oczekiwaniami (testowane przez alert w funkcji sukcesu (zobacz komentarz w funkcji sukcesu w AJAX). Wypełniając go tak: var allItems = @Html.Raw(Json.Encode(Model)); działa, ale kwerenda AJAX nie. Czy robię coś źle?

Answer 1

Możesz wywołać wywołanie ajaxa wewnątrz zamontowanej funkcji ("gotowe" w Vuejs 1.x).

<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

lepiej wold trzeba użyć

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

Proszę zobaczyć więcej here

Answer 3

udało mi się rozwiązać mój problem, wykonując mój niezbędnych działań w ramach obsługi sukces na AJAX Możesz tam umieścić całe tworzenie obiektów Vue, lub po prostu ustaw potrzebne dane.

Answer 4

Nie

jest inny sposób:

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

I nie zapomnij kasy plik * .php z:

echo json_encode($result);