Listar elementos con Vue.js

Clase 8 de 17 • Curso Básico de Vue.js 2016

Resumen

Otra de las funcionalidades que nos permite utilizar Vue.js son los ciclos.

Los ciclos son iteraciones para poder mostrar en pantalla ciertos elementos de manera repetitiva.

Comentarios

Rogelio Alberto

student•

No soy muy fan de mezclar nombre de variables en ingles/español, estas enseñando una mala practica.

Nando Alvarado Alvarado

student•

Yo si ^^

Claudio Nunez Oyarzun

student•

que buen aporte

Luis Fernando Raga Renteria

student•

Vue.js es genial !!

Edwar Cedeño

student•

Te apoyo. 😄

ENRIQUE NIETO MARTINEZ

student•

Me parece que Vue.js es un gran framework que reduce la complejidad y nos permite comenzar a pensar distinto sobre front end. Es genial.

KEVIN BRAYAN LUNA FIGUEROA

student•

Me esta gustando mucho Vue.js

Alexander Valencia

student•

recordar que el nombre de las variables en español es únicamente con fines educativos, lo ideal es tener nombres de variables, métodos, archivos, etc en ingles para que nuestro código tenga mejor...

Jorge Enríquez

student•

¿"Únicamente con fines educativos"? Dependerá de tus preferencias, de tu equipo de trabajo, de las convenciones de ese equipo, de si el código va a ser público o no... es decir, dependerá de mil factores y si bien posiblemente sea una buena práctica el usar nombres en inglés, no hay el menor problema en usar nombres en español. Yo llevo toda mi vida haciendo así y no me ha supuesto el menor problema, casi hasta al contrario ya que por ejemplo te evitas usar palabras reservadas que la gran mayoría de las veces son en inglés :)

Ximena Moreta

student•

Hola. El index.html de la clase al intentar bajar se abre en el navegador. Como puedo bajarlo como archivo

David Rodriguez

student•

Hola Ximena

Solo necesitas hacer click derecho sobre el icono de descarga y seleccionar guardar enlace como en el menu que aparece, solo eliges donde lo quieres guardar y ya esta. Adjunto una imagen para ilustrarlo mejor. .

. Saludos.

George M

student•

En el caso de objetos complejos, es posible usar <template> anidados?

Manuel Ojeda

student•

En teoría si se puede, en una parte de topicos avanzados, al generar slot scopes, se requiere el uso de templates para hacer uso de esos slots.

En resumen, si, si se puede, pero siempre debe de haber un template padre de todo el componente.

Fernando Gonzales

student•

el archivo publicado no corresponde.

Yeison Daza

student•

Corregido, gracias por reportar 😃

Jonattan Infante

student•

Porque al hacer lo mismo con un Input de tipo text el v-model solo almacena un valor en el array y no todos los valores?

Christian Lopez

student•

El iterador no debería ser “curso of cursos” ?? si uno usa “in” parecería que fuera iterar sobre las llaves…

Diego Forero

Team Platzi•

Hola, al usar el in es para decir por cada curso en cursos, es sacar cada objeto completo, y accedes a la propiedades de cada curso usando la notación de punto curso.xxxx

Esdras Ramón Salazar Sánchez

student•

Aqui hay una explicacion de TypeScript

Both for…of and for…in statements iterate over lists; the values iterated on are different though, for…in returns a list of keys on the object being iterated, whereas for…of returns a list of values of the numeric properties of the object being iterated.

John Jairo Castillo Cortes

student•

Hola buenos días, quisiera saber como descargo el archivo html, porque le doy click al icono de descargar y lo que hace es que abre otra ventana, gracias.

Diego Forero

Team Platzi•

En esa ventana que se abre das click derecho y seleccionar la opción guardar como o usas el teclado ctrl + s

Esleyder Ordoñez

student•

o Click derecho: ver codigo fuente de la pagina ( CTRL + U ), veras el codigo.

David Daniel Castillo Nava

student•

Código hasta ahora!!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		<h1>{{ title | uppercase }}</h1>
		<h2>{{ subtitle | lowercase }}</h2>
		<h3>{{ legend | capitalize }}</h3>
		<button @click="addCount" >sumar</button>
		<button @click="strCount" >restar</button>
		<div>El contadore esta en {{count}}</div>
		<!-- @keyup.enter="submit" :value="nombre" name="nombre"  --> 
		<input v-model="name" type="text" placeholder="Ingresa tu nombre" />
		<p>Tu nombre en mayuscula es: {{ name | uppercase }}</p>
		<!-- <a v-if="mostrar" :href="url" target="_blank">Ir a {{ pagina }}</a> -->
		<form @submit.prevent="submit" action="">
			<h2>¿Cuales son tus cursos favoritos?</h2>

			<template v-for="course in courses">
				<input v-model="coursesSelected" type="checkbox" :id="course.value" :value="course.value" />
				<label :for="course.value">{{ course.name }}</label>
			</template>
			
			<button type="submit">Enviar</button>
		</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data () {
				return {
					title: 'Estas viendo Platzi',
					subtitle: 'Estas viendo el curso de Vue.js',
					legend: 'Esto esta en capitalize',
					name: '',
					count: 0,
					courses: [
						{
							name: 'Curso de Vue.js',
							value: 'vue'
						},
						{
							name: 'Curso de React.js',
							value: 'react'
						},
						{
							name: 'Curso de SEO',
							value: 'seo'
						},
						{
							name: 'Curso de Growth Marketing',
							value: 'marketing'
						}
					],
					coursesSelected:[] 
				}
			},
			methods: {
				addCount (event) {
					this.count++
				},
				strCount (event) {
					this.count--
				},
				submit (event) {
					console.log(this.coursesSelected)
				}
			},
			filters: {
				uppercase: (str) => str.toUpperCase(),
				lowercase: (str) => str.toLowerCase(),
        		capitalize: (str) => str.replace(/\b\w/g, str => str.toUpperCase())
			}
		})
	</script>
</body>
</html>```

GEORGIE WLADIMIR DUARTE CADENAS

student•

no pme gusto el uso de pug, su aporte no parte del core del curso. Agradezco el intento por enseñar mas herramientas, pero es mejor el enfoque en vue y en conocer la estructura de como trabaja antes de modificarla para que se vea mas simplificada..

Andre Rivera

student•

el v-for es una variable asi que le puedo poner cualquier nombre obvio referencial a lo que estoy trabajando

Iván Toro

student•

Importante recordar el uso de la etiqueta template para agrupar etiquetas sobre las que Vue hace operaciones.

Ariel Omar Carrión Alcocer

student•

Guillermo Arce

student•

Hola Buenas, consulta, tengo los siguiente,

<template v-for="busqueda in busquedas">
		          	<div class="col-lg-4 form-group">
		  		  		<label :for="busqueda.name">{{ busqueda.label }}</label>
		  		  		<input :id="busqueda.name" :type="busqueda.type" :name="busqueda.name" :placeholder="busqueda.placeholder" :class="busqueda.class">
		  		  	</div>
		          </template>


// Mi array de Elementos de búsquedas
busquedas : [
		  {
			  label: "Rut",
			  name: "rut",
			  type: "text",
			  placeholder:"9917940-6",
			  class:"form-control"
		  },
		  {
			  label: "Vin",
			  name: "vin", 
			  type: "text",
			  placeholder:"VIN",
			  class:"form-control"
			  
		  },
		  {
			  label: "Patente",
			  name: "patente",
			  type: "text", 
			  placeholder:"GTYU97",
			  class:"form-control"
			  
		  },
		  
	  ]

entonces según mi array quiero mostrar mis input, pero estoy topando con el v-model, como lo agrego en en el input?

v-model="busqueda.name"

Leonard Mendoza

student•

si lo agregas al input pero con la variable que contiene todo el array

<input v-model="busquedas" :id="busqueda.name">

Alberto Eligio Sánchez Germán

student•

Según veo, si lo que quieres es atrapar el valor de los elementos con v-model tienes que sustituir el name de cada uno por v-model, no lo he intentado, supongo que sería así:

<input type="text" :v-model="busqueda.name">

Josué David Vitate Rodriguez

student•

me sale est cuando mi APIKEY, ¿Por qué?

Edwar Baron

Team Platzi•

Es un error de servidor, mas no de datos, intenta volver a probar.

Josué David Vitate Rodriguez

student•

ya intenté varias veces, no funciona. !!

Angel Enrique Barrios

student•

Genial, es un pelin mas de lo mismo pero pero pero, mas directo!!!

Christian David Sánchez

student•

Genial :O

 <template v-for="item in cursos">
                    <input v-model="cursosSeleccionados" type="checkbox" :value="item.value" :id="item.value" />
                    <label :for="item.value">{{item.nombre}}</label>
</template>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		<h1>{{ title | uppercase }}</h1>
		<h2>{{ subtitle | lowercase }}</h2>
		<h3>{{ legend | capitalize }}</h3>
		<button @click="addCount" >sumar</button>
		<button @click="strCount" >restar</button>
		<div>El contadore esta en {{count}}</div>
		<!-- @keyup.enter="submit" :value="nombre" name="nombre"  --> 
		<input v-model="name" type="text" placeholder="Ingresa tu nombre" />
		<p>Tu nombre en mayuscula es: {{ name | uppercase }}</p>
		<!-- <a v-if="mostrar" :href="url" target="_blank">Ir a {{ pagina }}</a> -->
		<form @submit.prevent="submit" action="">
			<h2>¿Cuales son tus cursos favoritos?</h2>

			<template v-for="course in courses">
				<input v-model="coursesSelected" type="checkbox" :id="course.value" :value="course.value" />
				<label :for="course.value">{{ course.name }}</label>
			</template>
			
			<button type="submit">Enviar</button>
		</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data () {
				return {
					title: 'Estas viendo Platzi',
					subtitle: 'Estas viendo el curso de Vue.js',
					legend: 'Esto esta en capitalize',
					name: '',
					count: 0,
					courses: [
						{
							name: 'Curso de Vue.js',
							value: 'vue'
						},
						{
							name: 'Curso de React.js',
							value: 'react'
						},
						{
							name: 'Curso de SEO',
							value: 'seo'
						},
						{
							name: 'Curso de Growth Marketing',
							value: 'marketing'
						}
					],
					coursesSelected:[] 
				}
			},
			methods: {
				addCount (event) {
					this.count++
				},
				strCount (event) {
					this.count--
				},
				submit (event) {
					console.log(this.coursesSelected)
				}
			},
			filters: {
				uppercase: (str) => str.toUpperCase(),
				lowercase: (str) => str.toLowerCase(),
        		capitalize: (str) => str.replace(/\b\w/g, str => str.toUpperCase())
			}
		})
	</script>
</body>
</html>```

<template v-for="busqueda in busquedas">
		          	<div class="col-lg-4 form-group">
		  		  		<label :for="busqueda.name">{{ busqueda.label }}</label>
		  		  		<input :id="busqueda.name" :type="busqueda.type" :name="busqueda.name" :placeholder="busqueda.placeholder" :class="busqueda.class">
		  		  	</div>
		          </template>


// Mi array de Elementos de búsquedas
busquedas : [
		  {
			  label: "Rut",
			  name: "rut",
			  type: "text",
			  placeholder:"9917940-6",
			  class:"form-control"
		  },
		  {
			  label: "Vin",
			  name: "vin", 
			  type: "text",
			  placeholder:"VIN",
			  class:"form-control"
			  
		  },
		  {
			  label: "Patente",
			  name: "patente",
			  type: "text", 
			  placeholder:"GTYU97",
			  class:"form-control"
			  
		  },
		  
	  ]

 <template v-for="item in cursos">
                    <input v-model="cursosSeleccionados" type="checkbox" :value="item.value" :id="item.value" />
                    <label :for="item.value">{{item.nombre}}</label>
</template>

Listar elementos con Vue.js

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?