Componentes en Vue.js y Preprocesadores CSS
Contenido del curso
Carlos Eduardo Gomez García
Juan Pablo Jimenez
Oscar Fuentes Esteves
Sebastián Buitrago
Jimmy Buriticá Londoño
Sebastián Buitrago
Juan Guillermo Perez Cardozo
Luis Abdel Rangel Castro
Fernando Molano Castrillón
Usuario anónimo
User
Jorge De Jesus Tejeda Bello
Santiago Jimenez Moncada
Eduardo Razo Cobián
Eric Concha
Juan Castro
Profesor
Marcos Manuel López Castro
Kevin Figuera
David Rangel
Néstor Raúl Guzmán Díaz
Fabian Andres Villon Garcia
Walter Eliseo Apaza Avila
David Rangel
Jonathan Guidi
Gabriel Quevedo
Andres Prieto
Esteban Maruri
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 :D
PD. Puedes abreviar cualquier usando el @, por ejemplo, en lugar de poner v-on:click, pueden usar @click 👀
gracias por el dato:)
Vaya en react es igual... necesitas una key para los elementos iterados.
Array con las peliculas
{ name: "Avengers", available: 3, quantity: 0, }, { name: "Terminator", available: 5, quantity: 0, },
Prefiero stylus, o la version .sass no .scss la cual obliga a usar el punto y coma y las llaves, es como usar JavaScript, cual prefieres tu?
Gracias, buena infografia
<template> <form v-for="(movie, i) in movies" :key="i"> <h4>{{ movie.name }}</h4> <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>
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.
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
este curso es uno de los mejores que eh visto, pero literal detesto sandbox!
La forma corta de la función click v:on:click="function()" versión corta: @click="function()"
Tengo un error que me dejó bastante confundido (porque creo estar haciendo todo tal cual lo presentan).
Si me pueden explicar que es lo que está mal. Dejo todo el código a continuación:
<template> <form v-for="movie in movies"> <h4>Terminator</h4> <button type="button">-</button> 0 <button type="button">+</button> </form> </template> <script> export default { name: "Form", data() { return { movies: [ { name: "Avengers", available: 5, quantity: 0, }, { name: "Spider-man", available: 3, quantity: 0, }, ], }; }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
Gracias!
Se me ocurre que envuelvas tu form dentro de alguna otra etiqueta. ¿Podrías probar si te funciona?
El error marca, porque para vue, todo dentro de <template></template> debe estar en una sola etiqueta. El v-for lo que hace es generar tantas etiquetas como iteraciones existan. Es como dice el profe @JuanDavidCastroGallego , se soluciona simplemente envolviendo el form dentro de otra etiqueta. podría ser así:
<template> <div> <form v-for="movie in movies"> <h4>Terminator</h4> <button type="button">-</button> 0 <button type="button">+</button> </form> </div> </template>
Mi practica:
<template> <form v-for="movie in movies" :key="movie.name"> <h4>{{ movie.name }}</h4> <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>
Ahora sí, les dijo mi código para el componente Form.vue, notarán que hay algunas diferencias con la clase de hoy ya que está hecho en Vue con Vite y TypeScript en Sandbox. Sin más por el momento, aquí está mi código:
<script setup lang="ts"> import { ref } from "vue"; const movies = ref([ { name: "Revengers", maxTickets: 12, defaultQuantity: 0, }, { name: "Spuder Moon", maxTickets: 10, defaultQuantity: 0, }, { name: "Baturu Man", maxTickets: 8, defaultQuantity: 0, }, { name: "Journey Rabbit", maxTickets: 2, defaultQuantity: 0, }, { name: "Blue Penter", maxTickets: 3, defaultQuantity: 0, }, { name: "River Gens, Mid Game", maxTickets: 5, defaultQuantity: 0, }, ]); </script> <template> <form v-for="movie in movies"> <h4>{{ movie.name }}</h4> <button type="button" v-on:click="movie.defaultQuantity -= 1" :disabled="movie.defaultQuantity <= 0" > - </button> {{ movie.defaultQuantity }} <button type="button" v-on:click="movie.defaultQuantity += 1" :disabled="movie.defaultQuantity >= movie.maxTickets" > + </button> </form> </template> <!-- Styles with scope only for this component --> <style scoped></style>
Si les aparece el siguiente error:
Error compiling template:
<form v-for="movie in movies" :key=" movie.name "> <h4>{{ movie.name }}</h4> <button type="button">-</button> {{ movie.quantity }} <button type="button">+</button> </form>
Esto se soluciona me tiendo todo el form dentro de una etiqueta <div>, ya que se produce cuando intentas utilizar una directiva v-for en el elemento raíz de un componente que renderiza múltiples elementos.
Puede ocultar la navegacion de archivos, ya que quita visibilidad a lo realmente importante "Codigo"
para el boton (-) bastaría con validar la cantidad igual a 0, ya que no habria manera que la cantidad sea negativa, igual para el boton (+) bastaría con validar que sea igual al maximo para deshabilitar el boton
Team, estoy trabajando con Sandbox el 4 de Abril del 2024, pero no encontré el template para Vue3, estoy trabajando con Vue desde Vite:
Para esta versión, he notado que no se necesita los "exports", incluso los marca como error, sólo bórrenlos y su código funcionará bien.
Este es mi código hasta ahora:
// Form.vue, este es un comentario que JS ni Vue leen <script setup lang="ts"> // export default { // name: "Form", // props: { // msg: String, // }, // }; </script> <template> <form> <h4>Terminator</h4> </form> </template> <!-- Styles with scope only for this component --> <style scoped></style> //App.vue, este es un comentario que JS ni Vue leen <script setup lang="ts"> import Form from "./components/Form.vue"; // export default { // name: "App", // components: { // Form: Form, // }, // }; </script> <template> <div> <a href="https://vitejs.dev" target="_blank"> <img src="/vite.svg" class="logo" alt="Vite logo" /> </a> <a href="https://vuejs.org/" target="_blank"> <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> </a> </div> <Form msg="Vite + Vue" /> </template> <style scoped> .logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms; } .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } .logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa); } </style>
Amigo yo venia con toda la intención que este sea el curso previo al de "Introducción a React" .. Pero viendo la sintaxis de Vue y todo lo que tiene.. Estoy dudando un montón !!
SE ACABÓ, RENUNCIO!!!!!!
Con esta pequeña explicación acabo de entender que llevo años usando Styled compnents y yo que pensaba que esa cosa era algo del diablo y súper complejo ^-^
ahora entiendo porque gusta tanto vue , me gusta un monton su sintaxis