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


Ordenar tabla relacionada por id descendente

Hola, necesito usar el orderBy('id', 'DESC') en mi controlador pero no se como incorporarlo sin que me de error necesito que la tabla post se ordene por id descendente pero al ser una tabla relacionada no lo consigo

  public function show($id)
    {

        $product = Product::with('Dsa')->with('Post')->find($id);
        
  

        return view('products...

Carga de registros, con datatables

Sera que datatables no aguanta una cantidad de registro mayor a 1 millon. tengo problemas con esa parte las consultas de busquedas se toman mucho tiempo. alguien que mepueda apoyar en esa parte. ...

Controlador laravel modificar ruta path

Actualmente al subir una imagen con mi Controlador la guarda en una capeta llamada image situada en el directorio public y me gustaria que cuando suba una imagen dentro de la carpeta image cree una nueva carpeta dentro de image con el nombre del usuario y esta sea donde guarde las imagenes pero no consigo agregar esa variable al controlador me da error...

  public functi...

Muriendo a causa de SOAP

Soy nuevo en el uso de web service y en rimorsoft, sin embargo no tengo idea de como crear y que necesito para hacer un servidor soap en php alguien podria ayudarme/orientarme con una guia aunque esta sea pequeña sera bien agradecida...

Tengo un archivo XSD para trabajarlo pero repito, no tengo idea ni de como comenzar y trabajarlo, se que tengo que crear un server soap y d...