如何在我的Vue 2待办应用程序中添加任务到列表?

2022-01-30 14:47:21 标签 vue.jsvuejs2

我试图添加一个任务到基于输入和添加任务按钮的Vue的任务列表,但我一直得到错误“tasklist是没有定义的”。有人知道如何解决这个问题吗?代码如下:

<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>

Ps。任何其他的Vue技巧也是受欢迎的。

###你需要分离出你的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>

###从我看到你使用的模板tasklist but you define it as taskList You但是你把它定义为taskList You will want to make您将需要确保您的名字在相同的情况下。通常你会在vue中看到camelCase,但其他流行的是snake_case和PascalCase

###看看这个例子(所有的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>

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码