web-dev-qa-db-fra.com

Initialisation des données Vue avec AJAX

J'essaie de renseigner une Vue avec les données de la JsonResult d'une requête AJAX. Mon Vue reçoit parfaitement les données lorsque je les code depuis mon modèle View, mais pas lorsque je tente de les récupérer à l'aide d'AJAX. Voici à quoi ressemble mon code:

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

Ceci est avec tous les bons comprend. Je sais que @Url.Action("GetItems", "Settings") renvoie l'URL correcte et que les données sont renvoyées comme prévu (comme testé par une alerte dans la fonction de réussite (voir le commentaire dans la fonction de réussite dans AJAX). Le remplir comme suit: var allItems = @Html.Raw(Json.Encode(Model)); fonctionne, mais le AJAX requête ne fonctionne pas. Est-ce que je fais quelque chose de mal?

javascriptjqueryajaxasp.net-mvcvue.js
21
muttley91

Vous pouvez effectuer l'appel ajax à l'intérieur de la fonction montée («ready» dans 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
Samuel De Backer

J'ai pu résoudre mon problème en effectuant les actions nécessaires dans le gestionnaire de succès de l'appel AJAX. Vous pouvez créer la totalité de la création d'objet Vue ou simplement définir les données dont vous avez besoin.

1
muttley91

J'ai eu le même problème, résolu par la réponse de Samuel De Backer ci-dessus.

Le problème est à la fonction de rappel ajax succès, 

si vous utilisez this.data, il est incorrect, car lorsque 'this' fait référence à vue-app, vous pouvez utiliser this.data, mais ici (fonction de rappel de succès ajax), cela ne fait pas référence à vue-app 'référence à celui qui a appelé cette fonction (appel ajax).

Donc vous devez définir var self = this avant ajax, puis passer à la fonction callback (success call back)

Voici mon code de travail

 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