Para realizar una iteración y que en la data no tengan algún dato único como el id pueden usar el index que da la directiva v-for:
v-for="(room, index) in rooms" :key="index"
Bienvenida e Introducción
Bienvenida y Presentación del proyecto: PlatziRooms
Creación y configuración inicial del proyecto utilizando VUE CLI 3
Boilerplate y Limpieza del proyecto
Render Functions y JSX
¿Que son las Render Functions y JSX?
Preparando nuestro entorno para un prototipo
Creación de un componente con createElement
Utilizando JSX para la creación de un componente
Utilizando Slots con Render Functions y JSX
Creando un Modal de Login para PlatziRooms
Creando la lógica general de nuestros modales con Vuex
Creando el contenido de nuestro modal
Componentes controlados y uso de librerías externas
Componentes Controlados y Variables Personalizadas
Construcción del componente de Recordar Contraseña
Creación de un componente Slider utilizando la librería tiny-slider
High Order Functions
¿Qué son las High Order Functions? - Crea tu primera HOF
Vuex
Obtener datos usando Vuex
Crea un getter dinámico en Vuex utilizando HOF
Creación de la vista para creación de publicaciones
Agregando datos con Vuex
Base de datos en tiempo real con Firebase
Instalación y Configuracion de Firebase Realtime Database
Obteniendo los datos desde Firebase Realtime Database
Agregando la consulta de usuarios
Almacenando nuevas publicaciones en Firebase Realtime Database
Perfeccionando el flujo de navegación de nuestra App
Autenticación con Firebase
Configuracion Inicial para trabajar con Firebase Authentication
Agregando nuevos usuarios en firebase autentication
Inicio de sesión de usuario
Cierre de sesión de usuario
Protegiendo páginas utilizando Navigation Guards
Scoped Slots
¿Qué son los Scoped Slots? Dónde utilizarlos y por qué
Integración de Scoped Slots en Platzi Rooms
Deploy
Creando y desplegando nuestra app en Heroku
Conclusiones y Despedida
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
We are going to convert our static manually repeated apartment list items into dynamic components that display the state data with Vuex.
For this we need to create a getter in the store.js file that takes care of getting the apartment information that we are going to consume from our components with the Vuex mapGetters function. Later we are going to consume the data from the Firebase database.
Contributions 9
Questions 0
Sort by:
Interesante uso del for para repetir contenido:
v-for="i in 12"
El usar propiedades computadas evita mutar el estado de un componente padre desde el hijo.
Muy buena clase!..
Unas de las cosas mas interesantes que logre notar es la gran cantidad de datos que ahora descansan sobre Vuex…
Simplifica mucho el trabajo.
Una pregunta. La manera de traer los datos a los componentes
import { mapGetters } from 'vuex';
...
...mapGetters({
user: 'authUser'
})
¿Se puede utilizar en la versión 2 del CLI de Vue?
Importante entender que cuando usamos
computed:{
...mapGetters([
'Arreglo',]),
}
Nos traemos un arreglo completo, mientras que para traernos una sola variable puntual del state
//variable pura
variable puntual:
computed: {
...mapGetters({
user: 'authUser',
}),
},
En mi caso particular las imagenes no se desplegaban.
Agregué 2 puntos al inicio de src y con eso funcionó.
Ejemplo de la imagen de profile:
<img class="profile__image w-full" :src="profile.avatar">
Creo que con estas últimas clase me quedó un poco más claro Vuex y me parece bastante interesante, aunque pienso que el store de Svelte es más sencillo jaja
Lo que me gusta de esto es la utilización de objetos para representar a cada campo del formulario, porque con una simple asignación podemos cargar todos los datos que tengamos, obviamente en un ambiente real con una base de datos tenemos que cuidar que la contraseña no se cuele por ahí al momento de hacer la asignación…
Want to see more contributions, questions and answers from the community?