javascript - validate - Inicializando datos de Vue con AJAX

vue router

Question

Estoy intentando rellenar un Vue con datos del JsonResult de una consulta AJAX. My Vue recibe los datos correctamente cuando los codifico desde mi View Model, pero no cuando trato de recuperarlos utilizando AJAX. Así es como se ve mi código:

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

Esto es con todo lo que incluye. Sé que @Url.Action("GetItems", "Settings") devuelve la URL correcta y los datos regresan según lo esperado (según lo probado por una alerta en la función de éxito (ver comentario en la función de éxito en AJAX). así: var allItems = @Html.Raw(Json.Encode(Model)); funciona, pero la consulta AJAX no lo hace. ¿Estoy haciendo algo mal?

Answer 1

Hay otra manera:

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'', ''./endpoint'', 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);
    }
}

Y no olvides terminar tu archivo * .php con:

echo json_encode($result);

Answer 2

Mejor que necesites usar

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

Por favor vea más here

Answer 3

Pude resolver mi problema realizando la acción necesaria dentro del controlador de éxito en la llamada AJAX. Puede poner toda la creación del objeto Vue allí o simplemente configurar los datos que necesita.

Answer 4

Puede realizar la llamada ajax dentro de la función montada ("listo" en 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 5

Tuve el mismo problema, arreglado por la respuesta de Samuel De Backer arriba.

El problema está en la función de devolución de llamada de éxito ajax,

si usa this.data, es incorrecto, porque cuando ''this'' hace referencia a vue-app, puede usar this.data, pero aquí (función de devolución de llamada exitosa ajax), esto no hace referencia a vue-app, en lugar de ''this ''referencia a quien haya llamado a esta función (llamada ajax).

Por lo tanto, debe establecer var self = this antes de ajax, luego pasar a la función de devolución de llamada (llamada exitosa)

Aquí está mi código de trabajo

 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 () {}