Ejercicio de programación con Vuejs: Implementar reactividad con ref y reactive

Código
Práctica
0h 25m

Vuejs: ejercicio código que implementa un sistema reactivo de gestión de tareas con ref y reactive que mejora tus habilidades en reactividad y manejo de estados.

El ejercicio de programación propuesto se centra en la implementación de un sistema reactivo dentro de la arquitectura de Vue.js, utilizando las funciones ref y reactive. Este ejercicio te permitirá adquirir experiencia práctica en la gestión de estado y reactividad en aplicaciones construidas con Vue.js. La actividad consiste en crear una aplicación sencilla pero funcional que permita a los usuarios gestionar una lista de tareas.

Deberás iniciar creando un sistema que permita al usuario añadir tareas nuevas mediante el uso de una variable reactiva para almacenar temporalmente el nombre de la nueva tarea. Además, necesitarás gestionar un array reactivo de tareas, donde cada tarea es un objeto con propiedades de nombre y estado de completado. Este sistema debe facilitar la adición de nuevas tareas, así como el marcado de tareas como completadas o no completadas.

En el desarrollo del reto, se te harán preguntas relativas a la implementación y uso de estos conceptos de reactividad, así como sobre la integración de funciones que gestionen el estado de las tareas. Los ejercicios están diseñados para que pienses en la práctica y apliques los conocimientos sobre reactividad en Vue.js, mejorando así tus habilidades en este popular framework.

Crea un sistema reactivo en Vue.js que permita gestionar una lista de tareas. Cada tarea debe tener un nombre y un estado que indique si está completada o no. Implementa las siguientes funcionalidades:

  1. Usa ref para crear una variable reactiva que almacene el nuevo nombre de la tarea que el usuario desea añadir.
  2. Usa reactive para crear un objeto que contenga un array de tareas, donde cada tarea es un objeto con las propiedades nombre (de tipo cadena) y completada (de tipo booleano).
  3. Implementa una función que permita añadir una nueva tarea a la lista, utilizando el nombre almacenado en la variable de ref.
  4. Implementa una función que permita marcar una tarea como completada o no completada.
  5. Asegúrate de que cualquier cambio en las tareas se refleje automáticamente en la interfaz de usuario.
Empezar ejercicio de programación

Todos los ejercicios de programación de Vuejs

Evalúa tus conocimientos con ejercicios de programación en Vuejs de tipo Test, Puzzle, Código y Proyecto con VSCode.

Certificados de superación de Vuejs

Supera todos los retos de Vuejs y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.

Tutorial para resolver este ejercicio de programación

Vue.js

Vuejs

Reactividad con ref y reactive

Composición y reactividad

Otros tutoriales de programación con Vuejs