Inizializzazione dei dati Vue con AJAX

Question

Sto tentando di popolare un Vue con i dati dallo JsonResult di una query AJAX. My Vue riceve i dati bene quando li codifico dal mio View Model, ma non quando provo a recuperarli usando AJAX. Ecco come appare il mio codice:

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

Questo è con tutti gli include. So che @Url.Action("GetItems", "Settings") restituisce l'URL corretto e che i dati tornano come previsto (come verificato da un avviso nella funzione di successo) (compilare il commento in AJAX). Popolarlo in questo modo: var allItems = @Html.Raw(Json.Encode(Model)); funziona, ma la query AJAX no. sto facendo qualcosa di sbagliato?

Answer 1

È possibile effettuare la chiamata ajax all'interno della funzione montata ("pronto" in 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

meglio Wold necessario utilizzare

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

si prega di vedere di più here

Answer 3

sono stato in grado di risolvere il mio problema eseguendo la mia azione necessaria all'interno del gestore di successo su AJAX chiamata. Puoi mettere l'intera creazione di oggetti Vue lì, o semplicemente imposta i dati che ti servono.

Answer 4

Ci

è un altro modo:

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

e non dimenticate finire il file .php * con:

echo json_encode($result);