A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Trabajando con Vue Components

19/28
Recursos

Aportes 11

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Solo como dato, pueden notar que el editor marca un error en la etiqueta de apertura de <form>, como tal, no es un error grave, pero para Vue es importante. Este error se debe a que Vue espera a que t√ļ le digas cu√°l va a ser el identificador de cada elemento que se est√° iterando, de esta forma puedes evitar problemas de reactividad en el futuro.

La forma de solucionarlo es a√Īadiendo un atributo :key a la etiqueta:

<form v-for="movie in movies" :key="movie.name">

En este caso estoy usando el atributo name de cada película como identificador, lo ideal sería que si tu array ya trae un ID lo uses.

Otra forma mucho m√°s pr√°ctica para solucionar esto es decirle a Vue que genere un ID con autoincremento, de esta forma:

<form v-for="(movie, i) in movies" :key="i">

De esta forma, en la variable i Vue puede ir guardando un contador que puede actuar como id, simplemente se lo pasamos al :key ūüėĄ

PD. Puedes abreviar cualquier usando el @, por ejemplo, en lugar de poner v-on:click, pueden usar @click ūüĎÄ

Array con las peliculas

{
          name: "Avengers",
          available: 3,
          quantity: 0,
        },
        {
          name: "Terminator",
          available: 5,
          quantity: 0,
        },
<template>
  <form v-for="(movie, i) in movies" :key="i">
    <h3>{{ movie.name }}</h3>
    <button
      type="button"
      v-on:click="movie.quantity--"
      v-bind:disabled="movie.quantity <= 0"
    >
      -
    </button>
    {{ movie.quantity }}
    <button
      type="button"
      v-on:click="movie.quantity++"
      v-bind:disabled="!(movie.quantity < movie.available)"
    >
      +
    </button>
  </form>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      movies: [
        { name: "Avengers", available: 5, quantity: 0 },
        { name: "Wonder Woman", available: 15, quantity: 0 },
      ],
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Por alguna raz√≥n <form v-for=‚Äúmovie in movies‚ÄĚ> no me iteraba los objetos pero al usar <form v-for=‚Äúmovie of movies‚ÄĚ> (cambiar in por of) ya me ha funcionado ūüėÖ

En esta pagina podr√°n ver como se transpila el codigo sass en css
Sass-Playground

La forma corta de la función click


v:on:click="function()"

versión corta: 
@click="function()"

Puede ocultar la navegacion de archivos, ya que quita visibilidad a lo realmente importante ‚ÄúCodigo‚ÄĚ

Mi practica:

<template>
  <form v-for="movie in movies" :key="movie.name">
    <h3>{{ movie.name }}</h3>
    <button
      type="button"
      v-on:click="movie.quantity -= 1"
      :disabled="movie.quantity <= 0"
    >
      -
    </button>
    {{ movie.quantity }}
    <button
      type="button"
      v-on:click="movie.quantity += 1"
      :disabled="movie.quantity >= movie.available"
    >
      +
    </button>
  </form>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      movies: [
        {
          name: "Avengers",
          available: 3,
          quantity: 0,
        },
        {
          name: "Terminator",
          available: 5,
          quantity: 0,
        },
      ],
    };
  },
  //props: {
  //  msg: String,
  //},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Para un próximo curso seria interesante que en una clase (como esta) no volver a hacer todo el código que ya se había hecho en una clase anterior. Realmente no entiendo el punto de hacer exactamente el mismo código. Podría haber sido una clase de 3 minutos agregándole los estilos al código que ya se tenía.

Sass!!!