如何将任务添加到我的 Vue 2 待办事项应用程序的列表中？答案

【问题标题】：How can I add a task to a list in my Vue 2 to-do app?如何将任务添加到我的 Vue 2 待办事项应用程序的列表中？
【发布时间】：2021-09-19 13:10:16
【问题描述】：

我正在尝试根据输入和添加任务按钮将任务添加到 Vue 中的任务列表，但我不断收到错误“任务列表未定义”。有人知道如何解决这个问题吗？代码如下：

<template>
   <div id="input">
   <form>
     <input v-model="task.name">
     <button v-on:click="addTask" v-bind:value="task.name">+</button>
   </form>

   <ol>   
      <div v-for="task in taskList" :key="task.id">
       {{ task.name }}

       <div v-if="task.completed">
          <h2> Done </h2>
       </div>
       <div v-else>
          <h2> Not done</h2>
      </div>

      </div>
    </ol>
     
   </div> 



</template>

<script>
    export default {
        name: 'AddTask',
        data: function() {
            return {
                taskList: [
                    {                   
                    name: 'task', completed: false, id: 3
                }               
                ] }  
                
            },
             methods: {
                   addTask: function (task) {
                       taskList.push(task);
                        alert('test');
                     } 
        }
    }
</script>

附言。也欢迎任何其他 Vue 技巧。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

您需要将您的 taskList 和您正在添加的当前任务分开，将其解耦为一个新对象，然后将其添加到您的 taskList 数组中。

当引用数据对象中的项目时 you need to use the this 关键字 - 例如 this.taskList 而不是 taskList：

new Vue({
  el: "#app",
  data: {
    id:1,
    taskList: [],
    currentTask:{
      completed:false,
      name:'',
      id:this.id
    }
  },
  methods: {
    addTask: function() {
      
      let newTask = {
        completed:this.currentTask.completed,
        name:this.currentTask.name,
        id:this.currentTask.id
      }
      
      this.taskList.push(newTask);
      this.id++;
      //alert('test');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div id="input">
    <ol>
      <li v-for="task in taskList" :key="task.id">
        {{ task.name }}
        <input type="checkbox" 
          :checked="task.completed"
          @change="task.completed = !task.completed">
        <span v-if="task.completed">
          Done
        </span>
        <span v-else>
          Not Done
        </span>
      </li>
    </ol>
      <input type="text" v-model="currentTask.name">
      <button v-on:click="addTask">+</button>
  </div>
</div>

【讨论】：

【解决方案2】：

根据我在您的模板中看到的内容，您使用tasklist，但您将其定义为taskList 您需要确保您的姓名大小写相同。通常你会在 vue 中看到 camelCase，但其他流行的还有 snake_case 和 PascalCase

【讨论】：

你是对的，但由于某种原因修复该问题后，我仍然遇到同样的错误。

【解决方案3】：

看看这个例子（所有的 CRUD 都实现了）：

new Vue({
  el: '#demo',
  name: 'AddTask',
  data() {
    return {
      task: {},
      taskList: [{name: 'task', completed: false, id: 1}],
      selected: false,
      ico: '+'
    }
  },
  methods: {
    addTask() {
      if (this.selected) {
        this.taskList.map((item) =>
          item.id !== this.task.id ? item : {...item, ...this.task}
        )
      } else if (this.task.name !== '' && this.task.name !== undefined) {
        this.task.id = this.taskList.length + 1
        this.taskList = [this.task, ...this.taskList];
      }
      this.clearTask()
    }, 
    selectTask(task) {
      this.task = task
      this.selected = true
      this.ico = 'update'
    },
    removeTask(id) {
      this.taskList = [...this.taskList.filter(t => t.id !== id)]
      this.clearTask()
    },
    clearTask() {
      this.task = {}
      this.selected = false
      this.ico = '+'
    }
  }
})

form, .list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  border: 1px solid grey;
  padding: .5em;
  margin: 0 auto;
}
form {
  justify-content: center;
  background: grey;
}
h3 {margin: 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div id="input">
    <form>
      <label for="name">Name</label>
      <input v-model="task.name" id="name">
      <label for="com">Completed</label>
      <input type="checkbox" v-model="task.completed" id="com" />
      <button @click.prevent="addTask">{{ ico }}</button>
    </form>

    <ol>   
      <div v-for="task in taskList" :key="task.id" class="list">
        <h3 @click="selectTask(task)">{{ task.name }}</h3>
        <div v-if="task.completed"> Done </div>
        <div v-else> Not done </div>
        <button v-if="task.id" @click.prevent="removeTask(task.id)">-</button>
      </div>
    </ol>
  </div> 
</div>

【讨论】：