时间戳

首页 > 解决方案 > 如何将任务添加到我的 Vue 2 待办事项应用程序的列表中？

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

问题描述

我正在尝试根据输入和添加任务按钮将任务添加到 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.jsvuejs2

解决方案

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

在引用数据对象中的项目时，您需要使用 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>

推荐阅读