Componentes en VUEjs

Vamos aprender a cómo crear componentes en VUE. Con componentes nos referimos a esos bloques de html que son estándar y que se usan varias veces con el mismo objetivo, todo esto con la única finalidad de aplicar la reutilización de código y reducir esas líneas de más.

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

En esta oportunidad vamos a usar un ejemplo con dos listas, es decir cada lista va a tener la misma estructura con sus etiquetas <ul>, <li> y las mismas clases bootstrap, pero cada lista va a mostrar un contenido diferente. Algo como esto:

<ul class="list-group">
    <li v-for="item in albums" class="list-group-item">
        {{ item.title }}
    </li>
</ul>
<ul class="list-group">
    <li v-for="item in posts" class="list-group-item">
        {{ item.title }}
    </li>
</ul>

Si nos fijamos en este código posee exactamente la misma estructura y nos damos cuenta que lo único que cambia son las variables albums y posts a las que estamos iterando para presentación de los datos, es aquí cuando podemos hacer uso de un Componente de VUE y es lo que te vamos a enseñar.

 

Código VUE

Para el ejercicio básicamente el código será el mismo al de anteriores videos, con la conexión cdn tanto a vue como axios, además de dos métodos getPosts y getAlbums cuya función será conectarse a una url diferente de un servidor y extraer los datos en formato JSON, esto ya lo hemos explicado para otros ejercicios por lo cual no profundizaremos y el código resultante sería el siguiente:

<script type="text/javascript">		
    var urlPosts  = 'https://jsonplaceholder.typicode.com/posts';
    var urlAlbums = 'https://jsonplaceholder.typicode.com/albums';
    new Vue({
        el: '#main',
	created: function() {
	    this.getPosts(),
            this.getAlbums()
	},
	data: {
	    posts: [],
	    albums: [],
	},
	methods: {
	    getPosts: function() {
	        axios.get(urlPosts).then(response => {
		    this.posts = response.data
		});
	    },
	    getAlbums: function() {
	        axios.get(urlAlbums).then(response => {
		    this.albums = response.data
		});
            }
        }
    });
</script>

 

Creando un componente

Para la creación de un componente tenemos que utilizar la siguiente línea Vue.component(nombre_componente, objeto) esta función recibe dos parámetros. El primer parámetro será el nombre del componente el cual utilizaremos en la vista para reemplazar las listas actuales. El segundo parámetro será un objeto con dos propiedades, la propiedad props define un variable en común para albums y posts que en este caso sería “lists”. Luego la propiedad template define un plantilla que en nuestro caso sería la lista con sus etiquetas <ul>, <li> y sus clases. En la plantilla del componente la directiva v-for ya no iteraría en las listas albums o posts sino que ahora lo hace usando la propiedad común lists.

Vue.component('common-list',{
    props    : ['lists'],
    template : `<ul class="list-group">
        <li v-for="item in lists" class="list-group-item">
	    {{ item.title }}
	</li>
    </ul>`,
});

 

Implementación del componente

Una vez que ya hemos creado nuestro componente en vue, ahora si ya podemos usarlo en nuestra página, ¿cómo? Pues muy sencillo, el nombre del componente se convierte en una etiqueta html de esta forma <common-list></common-list>, simplemente que con la directiva v-bind nos conectamos a la propiedad común lists y le asignamos como valor cualquiera de las dos propiedades albums o posts. Esto va a iterar en sus elementos y tendremos el mismo resultado pero con la gran diferencia de que el código ha sido simplificado y con la capacidad de ser reutilizado cuantas veces se lo de desee.

<div class="col-sm-4">
    <h1>Album</h1>
    <common-list v-bind:lists="albums"></common-list>
</div>
<div class="col-sm-4">
    <h1>Posts</h1>
    <common-list v-bind:lists="posts"></common-list>
</div>

¿Qúe te pareció esto? Interesante no es así, con esto podemos ahorrarnos largas líneas de código y hacerlo todo más claro. Espero que este tutorial te haya gustado y hayas aprendido un poco más sobre las maravillosas funcionalidades del framework VUE.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Validación de registros duplicados en tabla intermedia

Hola,

Necesito de su ayuda estoy tratando que un request valide un registro para que no sea repetido, este esta compuesto por tres llaves foraneas(instituto_id, carrera_id, campus_id). les dejo el request: ```php return [ 'instituto_id' => 'required|numeric|min:1', 'carrera_id' => 'required|numeric|min:1', ...

El auth de laravel trabaja con $_SESSION?.

el auth de laravel trabaja basado en tokens o con el objeto session de php ...

Rutas de Laravel no funcionan

Buenas a todos, tengo un problema, ultimamente, cada vez que creo un nuevo proyecto de Laravel las rutas de este no funcionan. Por ejemplo: si creo el proyecto, éste se crea, pero al agregarle el sistema de autenticación: "auth" se generan tanto las rutas en el archivo web.php y las vistas. pero si intento acceder a la sección de registro o inicio de sesión me aparece el e...

form request ajax laravel (Mostrar error de validación de formulario con ajax)

Hola, tengo una consulta por hacer. Quisiera conocer sus opiniones, sobre como mostrar los errores de validación con ajax cuando utlizo la clase Form Request. Debo decir que el mensaje de registrado con éxito si lo muestra, sin embargo los mensajes de error no los he podido mostrar. Gracias

//FORM REQUEST


public function rules()
    {
        return [
     ...