Renderizado de Listas

prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200]

pricesWithDays: [
                { day: 'Lunes', value: 8400 },
                { day: 'Martes', value: 7900 },
                { day: 'Miercoles', value: 8200 },
                { day: 'Jueves', value: 9000 },
                { day: 'Viernes', value: 9400 },
                { day: 'Sabado', value: 10000 },
                { day: 'Domingo', value: 10200 },
            ]```

Se utiliza la directiva v-for para recorrer el arreglo.
v-for = “p in prices”
.
Al utilizar esta directiva se recomienda el uso de key, ya que permite identificar de manera unívoca a cada elemento. Esto permite que si la lista se reordene, modifique o actualice la lista pueda seguir identificando cual es el elemento.
.
Podemos llamar al indice del elemento de la lista:
v-for="(p,i) in prices"

v-for = " (p, i) …"

• p hace referencia al elemento en sí
• i al índice del elemento.

Prácticamente el v-for es como usar un foreach

Me esta gustando mucho y sobre todo lo voy comprendiendo bien, gracias a estar meta estudiar JS y demas!

html

  <ul>
             <li v-for="p in prices" v-bind:key="p">
                 {{p}}
             </li>
         </ul>
         <ul>
             <li v-for="(d, i ) in dias" v-bind:key="d">
                 {{i}} - {{d}}
             </li>
         </ul>
         <ul>
             <li v-for="(m, i ) in pricesWithDays" v-bind:key="m.day">
                {{i}} : {{m.day}} - el valor fue {{m.value}}
             </li>
         </ul>

js

prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
             dias : ['lunes',
                     'martes',
                     'miercoles',
                     'jueves',
                      'viernes',
                      'sabado',
                       'domingo'],
             pricesWithDays: [
                 { day: 'Lunes', value: 8400 },
                 { day: 'Martes', value: 7900 },
                 { day: 'Miercoles', value: 8200 },
                 { day: 'Jueves', value: 9000 },
                 { day: 'Viernes', value: 9400 },
                 { day: 'Sabado', value: 10000 },
                 { day: 'Domingo', value: 10200 },
             ]

8.-Renderizado de Listas

Directiva v-for: es bastante común ya que nos permite renderizar arrays o listas dentro de nuestro html, es decir, nos permite repetir un set de código HTML en base a los elementos que podamos tener un array.

Cuando usamos un v-for se aconseja usar la propiedad key que le permite a Vue identificar de manera inequívoca a cada uno de los elementos, nos permite en caso de que la lista se reordene, modifique o actualice, Vue pueda seguir detectando cual es elemento y no pierda el track de esas dependencias.

También se puede acceder al elemento índice que representa cada uno de los elementos dentro del array usando como ejemplo: “(p, i) in prices”, donde el primer valor representa al elemento en si, y el 2 al índice de ese elemento.

Un v-for puede mostrar más allá de números o arrays simples, también puede haber un array de objetos

pricesWithDays: [
                { day: 'Lunes', value: 8400 },
                { day: 'Martes', value: 7900 },
                { day: 'Miercoles', value: 8200 },
                { day: 'Jueves', value: 9000 },
                { day: 'Viernes', value: 9400 },
                { day: 'Sabado', value: 10000 },
                { day: 'Domingo', value: 10200 },
            ]

Les recomiendo que usen paginas como Mockaroo que te permiten crear datos falsos para evitar crearlos manualmente, aqui un ejemplo:

https://www.mockaroo.com/8527aef0

Excelente clase!!!

    return {
      name:'Bitcoin',
      img:'https://logos-marcas.com/wp-content/uploads/2020/08/Bitcoin-Logo.png',
      changePercent: 0,
      prices : [8400, 7900, 8200, 9000, 9400, 10000, 10200],
      pricesWithDays : [
        {day:'Lunes', value:8400},
        {day:'Martes', value:7900},
        {day:'Miercoles', value:8200},
        {day:'Jueves', value:9000},
        {day:'Viernes', value:9400},
        {day:'Sabado', value:10000},
        {day:'Domingo', value:10200}
      ]
 
    }

Uso de v-for

que wen curso

No estaría de mas ver en acción el atributo v-bind
v-bind en el caso del v-for, supongo lo veremos mas adelante. 👀

Excelente curso

Interesante como trabajar con Vue

v-for es una directiva que nos permite renderizar array o listas dentro de nuestro HTML.

Cuando usemos v-for es recomendable utilizar dentro la propiedad key, que le permite a Vue identificar de manera univoca cada uno de los elementos.

<li v-for="p in prices" v-bind:key="p">

Otra de las cosas que podemos hacer dentro del v-for es acceder al elemento indice.

Vue JS cada día lo voy aprendiendo más muy buena clase hasta el momento de los mejores cursos que estoy realizando en Platzi

vue.js es la hostia ❤️

v-for es igual a un for in 😉

Estos son los objetos que yo use 😁✅

prices: [35000, 40000, 5000, 41000, 50000],
      pricesWithDays: [
        { day: "Lunes", value: 8400 },
        { day: "Martes", value: 7900 },
        { day: "Miercoles", value: 8200 },
        { day: "Jueves", value: 9000 },
        { day: "Viernes", value: 9400 },
        { day: "Sabado", value: 10000 },
        { day: "Domingo", value: 10200 },
      ]

Renderizado de Listas

Podemos iterar sobre un array con v-for:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Primera Vue</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app">
    <img v-bind:src="img" v-bind:alt="Bitcoin">
    <h1>
      {{ name }}
      <span v-if="changePercent > 0">🤑</span>
      <span v-else>🤯</span>
    </h1>

    <ul>
      <li v-for="(p, index) in prices" v-bind:key="p">
        {{index}} - {{ p }}
      </li>
    </ul>

    <ul>
      <li v-for="(p, index) in pricesWithDays" v-bind:key="p.day">
        {{index}} - {{ p.day }} - {{ p.value }}
      </li>
    </ul>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
</html>

new Vue({
  el: '#app',

  data() {
    return {
      name: 'Bitcoin',
      img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
      changePercent: 10,
      prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
      pricesWithDays: [
        { day: 'Lunes', value: 8400 },
        { day: 'Martes', value: 7900 },
        { day: 'Miercoles', value: 8200 },
        { day: 'Jueves', value: 9000 },
        { day: 'Viernes', value: 9400 },
        { day: 'Sabado', value: 10000 },
        { day: 'Domingo', value: 10200 },
      ]
    }
  }
});

Tambien podemos usar destructuring

     <ul>
        <li
          v-for="( {day , value} = price, index) in pricesWithDays"
          v-bind:key="day">{{index}} - {{day}} - {{ value }}
      </li>
    </ul>

 pricesWithDays: [
                { day: 'Lunes', value: 8400 },
                { day: 'Martes', value: 7900 },
                { day: 'Miercoles', value: 8200 },
                { day: 'Jueves', value: 9000 },
                { day: 'Viernes', value: 9400 },
                { day: 'Sabado', value: 10000 },
                { day: 'Domingo', value: 10200 },
            ],

Renderizar listas con v-for

La directiva v-for nos permite renderizar arreglos o listas dentro de nuestro HTML, para este ejemplo vamos a declarar una propiedad que contenga un arreglo llamado prices:

new Vue({
  el:'#app',
  data(){
    return{
      name: 'Bitcoin',
      img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
      changePercent: 10,
      prices: [8400, 7900, 8200, 9000, 9400, 1000, 1200],
    }
  }
})

y para poder renderizarlos en el HTML haremos lo siguiente:

<ul>
	<li v-for="price in prices">
	  {{ price }}
	</li>
</ul>

Cuando utilizamos esta directiva, es recomendable utilizar la propiedad key, que le permite identificar de manera única al elemento:

<ul>
  <li v-for="price in prices" :key="price">
    {{ price }}
  </li>
</ul>

<!-- Esto es lo mismo a que nosotros pongamos -->

<ul>
  <li v-for="price in prices" v-bind:key="price">
    {{ price }}
  </li>
</ul>

otra de las cosas que podemos hacer con el v-for es ingresas al elemento index que representa la posición que esta ocupando el elemento en el arreglo. (Este siempre comienza en 0).

<ul>
  <li v-for="(price, index) in prices" :key="price">
    {{index}} - {{ price }}
  </li>
</ul>

El resultado es:

Dentro de mi v-for podría contener un arreglo de objetos y recorrer cada uno de esos objetos tomando la propiedad que me interesa renderizar, para esto crearemos una nueva propiedad que contenga un arreglo con objetos:

pricesWithDays: [
  {day: 'Lunes', value: 8400},
  {day: 'Martes', value: 7900},
  {day: 'Miercoles', value: 8200},
  {day: 'Jueves', value: 9000},
  {day: 'Viernes', value: 9400},
  {day: 'Sabado', value: 1000},
  {day: 'Domingo', value: 1200},
],

y para renderizarlos usaremos la directiva v-for y con el nombre de la propiedad la recorreremos y los resultados los almacenaremos en una propiedad momentánea, para renderizar una propiedad de nuestros objetos lo haremos llamando a nuestra propiedad momentánea y con un punto accedemos a las propiedades del objeto:

<ul>
  <li v-for="(price, index) in pricesWithDays" :key="price.day">
    {{index}} - {{price.day}}: {{ price.value }}
  </li>
</ul>

En la directiva key debemos de ponerle valor única a cada uno de los elementos que se renderizaran, para esto le decimos que con la propiedad day.

El resultado es:

Saludos.
Estamos usando todo en ingles, entonces los nombres de los dias de la semana tambien.

new Vue({
    el: '#app',
    data() {
        return {
            name: 'Bitcoin',
            img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
            changePercent: -10,
            prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
            pricesWithDays: [
                { day: 'Monday', value: 8400 },
                { day: 'thursday', value: 7900 },
                { day: 'wednesday', value: 8200 },
                { day: 'tuesday', value: 9000 },
                { day: 'friday', value: 9400 },
                { day: 'saturday', value: 10000 },
                { day: 'sunday', value: 10200 },
            ]
        }
    }
});

Exitos.

Acabo de entender de una manera muy increíble y sencilla el manejo de las directivas para control de flujo, eso me motiva a continuar con más ganas las siguientes clases que están por llegar. Saludos de Lima, Perú

De hecho, no solo sirve para arrays, también se puede iterar objetos con sus keys y values, o iterar objetos con propiedades que a su vez son objetos.

Para el key tambien se puede usar el index que genera el v-for.

<ul>
 	<li v-for="(price, index) in prices" v-bind:key="index">
        	{{ price }}
      	</li>
</ul>

Directiva v-for

Permite renderizar arrays o listas dentro del HTML, permite repetir un set de código HTML en base a los elementos que podemos tener en un array.

Por ej. Dentro de una lista utilizamos la directiva v-for para representar cada elemento del array de prices con un elemento li de HTML. Para ello dentro de la directiva v-for introducimos p in prices y usamos una expresión para mostrar el valor de p. Es decir, prices es la propiedad dentro de data, mientras que pe es la representación de cada uno de esos elementos, que ésta última podría llamarse de cualquier otra manera por ej. price, y simplemente se utiliza una expresión para mostrar ese valor en la vista.

<ul>
      <li v-for="p in prices">
        {{ p }}
      </li>
</ul>

Cuando se utiliza un v-for es aconsejable utilizar la propiedad key, ya que ésta le permite a Vue identificar de manera unívoca cada uno de éstos elementos. Permite que en caso de que la lista sufra modificaciones, actualizaciones o se reordene, Vue puede seguir detectando cuál es el elemento y no pierda el trackeo de esas dependencias. Para ello utilizamos v-bind para decirle a Vue que la key es p, cada uno de esos precios del array.

<ul>
      <li v-for="p in prices" v-bind:key="p">
        {{ p }}
      </li>
</ul>

También en la directiva v-for podemos acceder al elemento índice que representa a cada uno de los elementos dentro del array, para ello utilizamos la notación de paréntesis, dónde el 1er elemento representa al elemento en sí, y el 2ndo representa al índice de ese elemento. Es posible utilizarlo dentro de una expresión o de la forma que se necesite.

<ul>
      <li v-for="(p, i) in prices" v-bind:key="p">
        {{ i }} - {{ p }}
      </li>
</ul>

Un v-for no solo puede mostrar un array de números o de strings, también puede tener un array de objetos. Si p es un objeto, y si necesitamos identificarlo unívocamente podemos decirle que tome el valor de la propiedad day, ya que sabemos que tenemos 7 días, y sabemos que no se va a repetir:

<ul>
      <li v-for="(p, i) in pricesWithDays" v-bind:key="p.day">
        {{ i }} - {{ p.day }}- {{ p.value }}
      </li>
</ul>

Es muy útil la directiva v-for ya que nos permite representar contenido dinámico, como una colección de datos que podemos traer de un servidor o un Rest API.

La directiva v-for nos permite renderizar arrays o listas dentro de HTML, es decir, repetir cierto código HTML en base a los elementos de un array/lista.

Tiene un comportamiento similar al de for-in.

Cuando se usa esta directiva es recomendable usar la propiedad key para que cada elemento ese identificado. Esto sirve para que, en caso de que la lista se modifique, Vue pueda seguir detectando cuál es el elemento y mantener el seguimiento.

También puedes obtener el index de cada elemento añadiendo un parentesis, donde el primer valor es el elemento en sí y el segundo el index del elemento.

no me quedo claro la parte de ** v-bind:key=p**

listas

<code>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div id="app">
        <img v-bind:src="img" v-bind:alt="name">
        <h1>
            {{ name }}
            <span v-if="changePercent > 0">Mayor a cero</span>
            <span v-else-if="changePercent < 0">menor a cero</span>
            <span v-else>uuuu</span>
            
            <span v-show="changePercent > 0">👍</span>
            <span v-show="changePercent < 0">dislike</span>
            <span v-show="changePercent == 0">aaaa</span>
        </h1>
        
        <ul>
            <li v-for="(p, i) in prices" v-bind:key="p">
                {{i}} - {{p}}
            </li>
        </ul>

        <ul>
            <li v-for="(p, i) in pricesWithDays" v-bind:key="p.day">
                {{i}} - {{p.day}} - {{p.value}}
            </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
</code>

el v-for nos permite pequeños componentes y asi manupularlos como queramos en la aplicacion

un v-for puede recorrer arrays de objetos

v-for(v,i) donde i es el idice y v es el valor en si

la propiedad key en vue, nos permite que si se reordena o sufre algun cambio y vue puede identificar el elemento en el dom

v-for nos permite recorrer los datos

la directiva v-for como su nombre lo indica es una directiva q nos permite iterar arreglos simples y arreglos de objetos.

Como repaso hasta esta clase
https://www.youtube.com/watch?v=GAQB7Y4X5fM&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=1

Directivas de renderizado de listas

    - v-for nos permite iterar sobre elementos de un array
    - key va junto con v-for, le permite a vue identificar de manera uniboca a cada uno de los elementos
      va junto con v-bind, por ejemplo v-bind:key="index"
    - Puede utilizarse tambien el indice, por ejemplo:
      v-for="(objeto, indice) in arreglo"

Podemos usar la directiva v-for para recorrer un array, ejemplo:

<li v-for="(price, index) in prices"> {{ price }} - {{ index }} </li>

price => Valor de cada item del array
index => Indice de cada elemento en el array

v-if="(valor, inedex) in array_de_valores"

• valor = valor de una iteración de array_de_valores
• index = la posición de ese valor en el array
• array_de_valores = la propiedad que estoy iterando, la cual es un array

Excelente clase 💪💪

prices: [2345, 3243, 46665, 35453, 34534, 5644]

Me esta gustando mucho Vue

Para que nuestros renderizado delista sea adecuado y mantenible es recomendado usar v-bind:key=“id.item”, esto es una buena practica que recomineda la documentacion de Vue.js en proyectos peque#os esto no afecta en lo absoluto, pero si estas trabajando en un proyecto a gran escala es de gran importancia para el mantenimiento y mejor renderizado de nuestro codigo

new Vue({
  el: '#app',

  data() {
    return {
      name: 'Bitcoin',
      img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
      changePercent: 10,
      prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
      pricesWithDays: [
        { day: 'Lunes', value: 8400 },
        { day: 'Martes', value: 7900 },
        { day: 'Miercoles', value: 8200 },
        { day: 'Jueves', value: 9000 },
        { day: 'Viernes', value: 9400 },
        { day: 'Sabado', value: 10000 },
        { day: 'Domingo', value: 10200 },
    ]
    }
  }
})

La directiva v-for nos permite iterar sobre elementos en un array y es muy común el uso porque nos permite crear pequeños componentes que vamos a repetir a lo largo de nuestra vista en base a la cantidad de elementos que tengamos en un array.

La directiva v-for, también es muy útil porque nos permite representar contenido dinámico por ejemplo una colección de datos que podemos traer de una API REST.

El key de la primera iteración debe ser el indice, y no la variable que guarda el valor del ciclo for. El precio se puede repetir en el array, a diferencia del indice que siempre será único. 😊

<ul>
<li v-for=" (p, i) in prices" :key=’'i" >{{ p }}</li>
</ul>

v-for es al directiva de bucle que recorre como un foreach elemento por elemento dentro de un array de elementos estos pueden ser objetos.

v-for =" (p, index) in products" :key="p.name"

aqui lo necesario

 prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
      pricesWithDays: [
        { day: 'Lunes', value: 8400 },
        { day: 'Martes', value: 7900 },
        { day: 'Miercoles', value: 8200 },
        { day: 'Jueves', value: 9000 },
        { day: 'Viernes', value: 9400 },
        { day: 'Sabado', value: 10000 },
        { day: 'Domingo', value: 10200 },
    ]```

en el ejemplo

excelente

Me puse a probar un poco y me dí cuenta de que se puede usar la destructuración de objetos ES6+.

<li v-for="{value,day} in pricesWithDays" :key="price">{{ `${day} -- $${value} ` }}</li>

Por qué uso p.day para asignarlos a key?
Osea que cuando nos entren valores dinámicos, tendremos que pensar en un valor en nuestros objetos que sea estático y no cambie.

Hace poco tenía un problema, tenía un array de imágenes así:
miArray = [ { url: ‘url1’, order: 0 }, { url: ‘url2’, order: 2 }, { url: ‘url3’, order: 1 }] los cuales tenía que renderear de acuerdo a su orden. No supe cómo hacer, así que le dije al desarrollador backend que me los mandara en orden. Pero esto me dejó una pregunta: Existirán situaciones en que el v-for no renderee en el orden del array? (De hecho, ésa fue la razón por la que el backend le puse un ‘order’ a esos objetos del array)

Muy util para hacer listas dinámicas y que necesiten de forma constante estar cargando