Estoy creando una aplicación de tareas pendientes usando Vue.js con la biblioteca Vuetify. Tengo un chip que muestra el estado de cada tarea. Agrego un botón (v-btn) fuera de los chips con changeState() cuando se hace clic.
Mi problema actual es que el estado de mi tarea es "no iniciado", pero cuando presioné el botón, no cambia su estado. mi resultado esperado es después de presionar, cambiará el estado de 'no iniciado' a 'en curso' y cuando presione el mismo botón nuevamente, cambiará de 'en curso' a 'completado'
el valor de estado de cada estado no se inicia = 0, en curso = 1, se completa = 2
HTML:
<v-btn depressed color="white" @click="changeState"> <div align="center" class="mt-2"> <v-chip small class="v-chip--active white--text caption my-2" :color="task.status"> {{task.status}} </v-chip> </div> </v-btn>JavaScript:
let id = 1 let state let stateValue = 0 if (stateValue == 0){ state = 'not started' } if (stateValue == 1){ state = 'ongoing' } if (stateValue == 2) { state = 'completed' } export default { data() { return { newTask: '', tasks: [ { id: id++, title: 'Task 1', status: state, value: stateValue}, { id: id++, title: 'Task 2', status: state, value: stateValue }, { id: id++, title: 'Task 3', status: state, value: stateValue }, ], } }, methods: { addTask() { this.tasks.push({ id: id++, title: this.newTask, status: state, value: 0}) this.newTask = '' }, removeTask(task) { this.tasks = this.tasks.filter((t) => t !== task) }, changeState() { if (stateValue <= 2) { stateValue++ } }, } }Debe actualizar el estado de la tarea correspondiente, no la variable global stateValue :
<template> <div> <v-btn v-for="task in tasks" :key="task.id" depressed color="white" @click="changeState(task)"> <div align="center" class="mt-2"> <v-chip small class="v-chip--active white--text caption my-2" :color="statusName[task.status]"> {{ statusName[task.status] }} </v-chip> </div> </v-btn> </div> </template> <script> export default { name: 'MyCustomComponent', data() { return { tasks: [ { id: 1, title: 'Task 1', status: 0 }, { id: 2, title: 'Task 2', status: 0 }, { id: 3, title: 'Task 3', status: 0 }, ], }; }, computed: { statusName() { return [ 'not started', 'ongoing', 'completed', ]; } }, methods: { changeState(task) { task.status < 2 && task.status++; } } } </script>