Initialisation des données Vue avec AJAX

J'essaie de remplir une Vue avec des données du JsonResult d'une requête AJAX. Mon Vue reçoit les données très bien lorsque je l'encode à partir de mon modèle de vue, mais pas lorsque j'essaie de le récupérer à l'aide d'AJAX. Voici à quoi ressemble mon code:

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

C'est avec tous les éléments appropriés. Je sais que @Url.Action("GetItems", "Settings") renvoie l'URL correcte et les données reviennent comme prévu (testé par une alerte dans la fonction de réussite (voir commentaire dans la fonction de réussite dans AJAX). Donc: var allItems = @Html.Raw(Json.Encode(Model)); fonctionne, mais la requête AJAX ne fonctionne pas. Est-ce que je fais quelque chose de mal?

Vous pouvez faire l'appel ajax à l'intérieur de la fonction montée ("prêt" dans Vuejs 1.x).

 <script type="text/javascript"> var ItemsVue = new Vue({ el: '#Itemlist', data: { Items: [] }, mounted: function () { var self = this; $.ajax({ url: '@Url.Action("GetItems", "Settings")', method: 'GET', success: function (data) { self.Items = data; }, error: function (error) { alert(JSON.stringify(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>

J'ai pu résoudre mon problème en effectuant mes actions nécessaires dans le gestionnaire de succès sur l'appel AJAX. Vous pouvez soit mettre la création complète de l'objet Vue là-bas, soit simplement définir les données dont vous avez besoin.

Il y a une autre façon:

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

Et n'oubliez pas de terminer votre fichier * .php avec:

 echo json_encode($result);

Mieux vaut-il avoir besoin d'utiliser

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

S'il vous plaît voir plus ici