在 vue.js 的数组中返回“未定义”的对象值

Question

我正在努力提高自己在 JavaScript OOP 方面的水平，并且我也在学习 vue.js。我正在建立一个简单的任务列表来自学，除了删除任务功能之外，我已经完成了大部分工作。我最初只是使用 .remove() 选项，但它没有更新我前端的 v-if 和 v-else 语句，即使使用另一个函数检查数组的长度也是如此。所以，我决定尝试拼接我的数组，但我有点迷茫，因为它返回未定义。由于数组中的每个元素都是一个对象，因此我确定这是我尝试调用该值的方式，但我不太确定该怎么做。

这里是 HTML：

<div class="form-group">

      <input type="text" id='task-entry' class='px-2' @keyup.enter="addTask">
      <a href="#" class='btn btn-info' id='task-button' @click="addTask">Add Task</a>

    </div> <!-- form-group -->

    <hr class='hr my-5 bg-dark'>

    <div class="task-list py-3 bg-white mx-auto w-75">

      <ul v-if='taskList.length > 0' class='mb-0 px-2'>

        <li v-for="tasks in taskList" class='text-dark p-3 task-item text-left clearfix'>
          <div class='task-name float-left'>
              <span>{{ tasks.task }}</span>
          </div>

          <a href="#" class="btn btn-danger remove-task float-right" @click='removeTask'>Remove Task</a>

        </li>

      </ul>

      <div v-else>
        You currently have no tasks.
      </div>

这里是 JavaScript：

new Vue({
  el: '#app',
  data: {
    title: 'To Do List',
    taskList: [],
    showError: false
  },
  methods: {
    addTask: function () {

      var task = document.getElementById('task-entry');

      if (task.value !== '' && task.value !== ' ') {
        this.error(1);
        this.taskList.push({
          task: task.value
        });
        task.value = '';
      } else {
        this.error(0);
      }
    },
    removeTask: function (e) {
      if(e.target.classList.contains('remove-task')) {

        var targetElement = e.target.parentElement;

        var test = targetElement.querySelector('span').innerText;

        console.log(test);
        console.log(this.taskList[{task: test}]);

      } else {
        e.preventDefault;
      }
    },
    error: function (value) {
      if (value === 0) {
        this.showError = true;
      } else {
        this.showError = false;
      }
    }
  }
});

Answer 1

试试这个：（我用VueJS的方式实现remove功能，很简单）

new Vue({
  el: '#app',
  data: {
    title: 'To Do List',
    taskList: [],
    showError: false
  },
  methods: {
    addTask: function() {
      var task = document.getElementById('task-entry');
      if (task.value !== '' && task.value !== ' ') {
        this.error(1);
        this.taskList.push({
          task: task.value
        });
        task.value = '';
      } else {
        this.error(0);
      }
    },
    removeTask: function(tasks) {
      this.taskList.splice(this.taskList.indexOf(tasks), 1)
    },
    error: function(value) {
      if (value === 0) {
        this.showError = true;
      } else {
        this.showError = false;
      }
    }
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <div class="form-group">
    <input type="text" id='task-entry' class='px-2' @keyup.enter="addTask">
    <a href="#" class='btn btn-info' id='task-button' @click="addTask">Add Task</a>
  </div>
  <!-- form-group -->
  <hr class='hr my-5 bg-dark'>
  <div class="task-list py-3 bg-white mx-auto w-75">
    <ul v-if='taskList.length > 0' class='mb-0 px-2'>
      <li v-for="tasks in taskList" class='text-dark p-3 task-item text-left clearfix'>
        <div class='task-name float-left'>
          <span>{{ tasks.task }}</span>
        </div>
        <a href="#" class="btn btn-danger remove-task float-right" @click='removeTask(tasks)'>Remove Task</a>
      </li>
    </ul>
    <div v-else>
      You currently have no tasks.
    </div>
  </div>

---

有两个小步骤可以让您的代码按预期工作：

S1：在模板中将事件处理程序更改为@click='removeTask(tasks)'，如下所示：

<a href="#" class="btn btn-danger remove-task float-right" @click='removeTask(tasks)'>Remove Task</a>

S2：在脚本中，像这样重写remove方法：

removeTask: function(tasks) {
   this.taskList.splice(this.taskList.indexOf(tasks), 1)
}

Answer 2

有一种更特定于 Vue 的方式来实现您想要实现的目标，而且您绝对不需要查询 DOM 的值。

让我们从您的removeTask 方法开始。

Array.prototype.splice() 使用索引从数组中删除/插入值。您可以使用类似的方法从v-for 获取此索引

<li v-for="(tasks, index) in taskList">

现在你的 remove 链接可以使用这个索引了

<a @click.prevent="removeTask(index)">

你的方法可以使用

removeTask (index) {
  this.taskList.splice(index, 1)
}

---

对于添加任务，我建议使用v-model 将新的任务 绑定到您的输入，例如

<input type="text" v-model="newTask" @keyup.enter="addTask">

和

data: {
  title: 'To Do List',
  taskList: [],
  showError: false,
  newTask: '' // added this
},
methods: {
  addTask () {
    if (this.newTask.trim().length > 0) {
      this.error(1)
      this.taskList.push({ task: this.newTask })
      this.newTask = ''
    } else {
      this.error(0)
    }
  }
}