Javascript Vue.js 增量值改變todo app中任務的state

Question

我正在使用 Vue.js 和 Vuetify 庫創建一個待辦事項應用程序。 我有一個顯示每個任務的 state 的芯片。 單擊時，我使用 changeState() 在芯片外部添加了一個按鈕 (v-btn)。

我當前的問題是，我的任務 state“未開始”，但是當我按下按鈕時，它不會更改其 state。我的預期結果是按下后，它將 state 從“未開始”更改為“正在進行”，以及何時我再次按下相同的按鈕，它將從“正在進行”變為“已完成”

每個 state 的 state 值未開始 = 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>