AJAX

Question

के साथ व्यू डेटा प्रारंभ करना मैं AJAX क्वेरी के JsonResult से डेटा के साथ एक 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") सही यूआरएल देता है और डेटा अपेक्षित रूप से वापस आता है (जैसा कि सफलता समारोह में एक चेतावनी द्वारा परीक्षण किया जाता है (AJAX में सफलता फ़ंक्शन में टिप्पणी देखें)। इसे इस तरह पॉप्युलेट करना: var allItems = @Html.Raw(Json.Encode(Model)); काम करता है, लेकिन AJAX क्वेरी नहीं करता है। मैं कुछ गलत कर रहा हूं?

Answer 1

आप आरोही फ़ंक्शन के अंदर AJAX कॉल (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

बेहतर आप उपयोग करना

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

कृपया की जरूरत wold अधिक here

Answer 3

मैं AJAX पर सफलता हैंडलर भीतर मेरे आवश्यक कार्रवाई प्रदर्शन से मेरी समस्या का समाधान करने में सक्षम था कॉल करें। आप या तो पूरे वू ऑब्जेक्ट सृजन को वहां रख सकते हैं, या बस आपको आवश्यक डेटा सेट करें।

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