i am creating a todo app using Vue.js with Vuetify library. I have a chip that shows the state of each task. I add a button (v-btn) outside of the chips with the changeState() when on clicked.
My current problem is , my task's state is 'not started' but when i pressed the button, it does not change its state. my expect result is after pressed , it will change the state from 'not started' to 'ongoing' and when i press the same button again it will change from 'ongoing' to 'completed'
the state value of each state is not started = 0, ongoing = 1, completed = 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++
}
},
}
}
You should update the status of the corresponding task - not the global variable 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>