Javascript Vue.js 递增值以更改待办事项应用程序中的任务状态

Question

我正在使用 Vue.js 和 Vuetify 库创建待办事项应用程序。我有一个显示每项任务状态的芯片。单击时，我使用 changeState() 在芯片外部添加了一个按钮 (v-btn)。

我目前的问题是，我的任务状态是 'not started'，但是当我按下按钮时，它并没有改变它的状态。我的预期结果是按下后，它会将状态从 'not started' 更改为 'ongoing'，当我再次按下同一个按钮时，它将从 'ongoing' 更改为 'completed'

各状态的状态值未开始=0，进行中=1，完成=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++
        }
      },
    }
  }

Answer 1

您应该更新相应任务的状态 - 而不是全局变量 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>

Javascript Vue.js 递增值以更改待办事项应用程序中的任务状态

Javascript Vue.js increment value to change state of task in todo app

javascript

vuejs2

vuetify.js