VUEjs y AJAX, manejo de respuesta JSON con VUE-RESOURCE

Vue Resource: El complemento para Vue.js que proporciona servicios para realizar peticiones web y manejar respuestas usando un XMLHttpRequest o JSON.

 

Inicia sesión para poder registrar las lecciones que has completado Login

Comparte en

¿API? La interfaz de programación de aplicaciones, abreviada como API del inglés: Application Programming Interface, es un conjunto de subrutinas, funciones y procedimientos que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción.

Es un software que provee datos, ejemplo: Laravel provee datos a VUE :) Vue Resource es una de las maneras de usar AJAX usando VUE.

Implementar

Para ello necesitamos acceder y vincular los archivos Javascript en nuestro HTML, lo logramos con los siguientes accesos CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.1/vue-resource.min.js"></script>

Traer datos usando VUE-Resource

Ejemplo

<script>
    var urlUsers = 'https://jsonplaceholder.typicode.com/users';
    this.$http.get(urlUsers).then(function(response){
        this.lists = response.data;
    });
</script>

Donde https://jsonplaceholder.typicode.com/users es el encargado de darnos los datos con el formato correcto, hablamos en este caso del API usada para el ejemplo, mas adelante crearemos nuestro API usando Laravel.

Comparte en

Creado por: Venezuela Italo Morales

CEO & Founder de Rimorsoft Online

Más información


Actualizar registros con LARAVEL y VUEjs

Laravel VUE.js VUE.js 2 0 comentarios

Tenemos que continuar con el proceso de edición de un registro y es por esto que en este video vamos a crear el bloque de código necesario para realmente actualizar en la base de datos utilizando la tecnología de Laravel y Vue.

Formulario para Editar con LARAVEL y VUEjs

Laravel VUE.js VUE.js 2 0 comentarios

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva ventana flotante con la función edit para preparar los datos en Vue.

Guardar datos con LARAVEL y VUEjs – Método STORE

Laravel VUE.js VUE.js 2 0 comentarios

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para hacer el al llamado al método store() del API creada en Laravel.

Formulario de creación con ventana Modal - Laravel y Vuejs

Laravel VUE.js VUE.js 2 0 comentarios

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una ventana Modal que aparece al hacer clic en el botón para crear una nueva tarea.