Bueno, ya habíamos visto una forma de realizar peticiones ajax con Vue mediante la librería vue-resource. En esta ocasión vamos a usar otra llamada axios:

Para ello debemos incluir, además de la librería de Vue:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

La de axios:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Podemos revisar la documentación de axios desde su página de github:

https://github.com/axios/axios

Donde también nos muestra otra forma de instalar la librería con npm (Sólo si tenemos node.js instalado en nuestra máquina):

$ npm install axios

La forma de utilizar axios es muy fácil.

Por ejemplo si quisiéramos hacer una petición por GET:

axios.get('URL')
.then(function (response) {
 console.log(response);
})
.catch(function (error) {
 console.log(error);
});

Como vemos en el ejemplo, indicamos la URL que queremos consumir. Esto puede disparar dos métodos:

Cuando nos devuelve una respuesta del servicio:

.then(function (response) {
 console.log(response);
})

O bien, si hubo algún error:

.catch(function (error) {
 console.log(error);
});

Tan simple como esto.

También podemos agregar parámetros para enviar al servidor:

axios.post('URL', {
 param1: 'Parametro 1',
 param2: 'Parametro 2'
})
.then(function (response) {
 console.log(response);
})
.catch(function (error) {
 console.log(error);
});

Notar que agregamos como segundo parámetro un json con la información que vamos a enviar. Ademas que en este caso, en lugar de get(), estamos haciendo una petición por medio de post().

Ejemplo

En la publicación pasada, habíamos visto como crear componentes:

https://fernando-gaitan.com.ar/crear-componentes-con-vue-js/

Podemos replantear este ejercicio, pero los sabores de helados cargarlos desde un servicio:

Cargamos Twitter Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Y por último Vue y Axios:

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Creamos nuestro componente:

Vue.component('component-helado', {
 props: ['helado'],
 template: `
    <div> 
       <button class="btn btn-success" v-on:click="agregar(helado)" v-if="!helado.seleccionado"> + </button> 
       <button class="btn btn-danger" v-on:click="eliminar(helado)" v-if="helado.seleccionado"> - </button> 
       <span> {{ helado.sabor }} </span> 
       <hr /> 
    </div> 
 `,
 methods: {
    agregar: function(p_helado){
       p_helado.seleccionado = true; 
    },
    eliminar: function(p_helado){ 
       p_helado.seleccionado = false; 
    }
 }
});

Y luego nuestro controlador:

new Vue({
 el: '#app',
 data: {
    helados: []
 },
 created: function(){
    var that = this;
    axios.get('https://raw.githubusercontent.com/fernandoggaitan/vuejs_axios/master/response.json')
    .then(function (response) {
       that.helados = response.data;
    })
    .catch(function (error) {
       console.log('Error: ' + error);
    }); 
 }
});

Notar que en esta última versión recuperamos la lista de helados de la siguiente URL:

https://raw.githubusercontent.com/fernandoggaitan/vuejs_axios/master/response.json

Finalmente agregamos la vista:

div id="app" class="container">
 <h1> Helados </h1>
 <h2> Lista </h2>
 <ul>
    <li v-for="item in helados"> 
       <component-helado v-bind:helado="item"></component-helado> 
    </li> 
 </ul> 
 <h2> Seleccionados </h2>
 <ul>
    <li v-for="item in helados" v-if="item.seleccionado"> {{ item.sabor }} </li> 
 </ul> 
</div>

Descargar ejemplo