AJAXでVueデータを初期化する

Question

VUEにAJAXクエリのJsonResultからのデータを入力しようとしています。 My Vueは、ビューモデルからデータをエンコードするときにデータを受け取るだけですが、AJAXを使用してデータを取得しようとするとデータは受信されません。私のコードは次のようになります：

<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));は動作しますが、成功しません。私が何か間違ったことをやっているか？

Answer 1

マウントされた関数内でajax呼び出しを行うことができます（Vuejs 1.xでは "ready"）。

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