it-swarm.com.de

Vue-Daten werden mit initialisiert AJAX

Ich versuche, einen Vue mit Daten aus der JsonResult einer AJAX-Abfrage zu füllen. Mein Vue empfängt die Daten einwandfrei, wenn ich sie von meinem View Model codiere, aber nicht, wenn ich versuche, sie mit AJAX abzurufen. So sieht mein Code aus:

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

Dies ist mit allen richtigen umfasst. Ich weiß, dass @Url.Action("GetItems", "Settings") die richtige URL zurückgibt und die Daten wie erwartet zurückkommen (getestet durch einen Alert in der Erfolgsfunktion (siehe Kommentar in der Erfolgsfunktion in AJAX). Füllen Sie es wie folgt aus: var allItems = @Html.Raw(Json.Encode(Model)); funktioniert, aber das AJAX Abfrage nicht. Mache ich etwas falsch?

21
muttley91

Sie können den Ajax-Aufruf innerhalb der gemounteten Funktion ausführen ("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 = 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>
54

Ich konnte mein Problem lösen, indem ich im Aufruf des AJAX - Aufrufs die erforderliche Aktion innerhalb des Erfolgshandlers durchführte. Sie können entweder die gesamte Vue-Objekterstellung dort ablegen oder einfach die benötigten Daten festlegen.

1
muttley91

Ich hatte das gleiche Problem, behoben durch Samuel De Backers Antwort oben.

Das Problem ist bei Ajax Success Callback-Funktion, 

wenn Sie this.data verwenden, ist dies nicht korrekt, denn wenn "this" auf die vue-app verweist, können Sie this.data verwenden. Hier (ajax success callback function) bezieht sich dies jedoch nicht auf vue-app, sondern auf "this" 'Verweis auf das, was diese Funktion aufgerufen hat (Ajax-Aufruf).

Sie müssen also var self = this vor ajax setzen und dann in die Callback-Funktion übergehen (Erfolgsrückruf).

Hier ist mein Arbeitscode

 created () {
     this.initialize()
  },


 mounted () {

        this.getData()
 },


 methods: {

     getData()  {




                 var getUser_url = url + 'cfc/sw.cfc?method=getUser&returnformat=json&queryformat=struct';

                console.log(getUser_url )

            /*
                You can use a plethora of options for doing Ajax calls such as Axios, vue-resource or better yet the browser's built in fetch API in modern browsers. 
                You can also use jQuery via $.ajax() API, which simply wraps the XHR object in a simple to use method call 
                but it's not recommended to include the whole jQuery library for the sake of using one method.


                http://updates.html5rocks.com/2015/03/introduction-to-fetch
                The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. 
                It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

            */


                //   **********  must use self = this ************** 
                // this reference vue-app.  must pass it to self, then pass into callback function (success call back)
                var self = this;  


                fetch(getUser_url).then(function (response) {
                                return response.json();
                        }).then(function (result) {

                                 console.log(result);  

                                 // must use self.user,  do not use this.user, 
                                 // because here, this's scope is just the function (result).   
                                 // we need this reference to vue-app, 
                                 self.user = result;  // [{}, {}, {}]  



    }); // fetch(){}


   console.log(this.user);


  }, 



initialize () {}
0
hoogw