Vue-Daten mit AJAX initialisieren

Ich versuche, ein Vue mit Daten aus dem zu füllen JsonResult einer AJAX-Abfrage. Mein Vue empfängt die Daten problemlos, wenn ich sie aus meinem Ansichtsmodell 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 Includes. ich weiß das @Url.Action("GetItems", "Settings") gibt die richtige URL zurück und die Daten kommen wie erwartet zurück (wie durch eine Warnung in der Erfolgsfunktion getestet (siehe Kommentar in der Erfolgsfunktion in AJAX). Füllen Sie es so aus: var allItems = @Html.Raw(Json.Encode(Model)); funktioniert, aber die AJAX-Abfrage nicht. Mache ich etwas falsch?

Sie können den Ajax-Aufruf innerhalb der gemounteten Funktion durchführen („bereit“ 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>

Ich konnte mein Problem lösen, indem ich meine notwendige Aktion innerhalb des Erfolgshandlers für den AJAX-Aufruf ausführte. Sie können entweder die gesamte Vue-Objekterstellung dort einfügen oder nur die Daten festlegen, die Sie benötigen.

Ich hatte das gleiche Problem, das durch die Antwort von Samuel De Backer oben behoben wurde.

Das Problem liegt bei der Ajax Success Callback-Funktion,

Wenn Sie this.data verwenden, ist dies falsch, denn wenn „this“ auf die vue-app verweist, könnten Sie this.data verwenden, aber hier (Ajax Success Callback-Funktion) verweist dies nicht auf vue-app, sondern auf „this ‘ Verweis auf denjenigen, der 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 () {}