Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Initializing Vue data with AJAX

I'm trying to populate a Vue with data from the JsonResult of an AJAX query. My Vue receives the data just fine when I encode it from my View Model, but not when I try to retrieve it using AJAX. Here's what my code looks like:

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

This is with all of the proper includes. I know that @Url.Action("GetItems", "Settings") returns the correct URL and the data comes back as expected (as tested by an alert in the success function (see comment in success function in AJAX). Populating it like so: var allItems = @Html.Raw(Json.Encode(Model)); works, but the AJAX query does not. Am I doing something wrong?

like image 421
muttley91 Avatar asked Sep 05 '15 14:09

muttley91


1 Answers

You can make the ajax call inside of the mounted function (“ready” 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 = JSON.parse(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> 
like image 105
Samuel De Backer Avatar answered Oct 05 '22 11:10

Samuel De Backer