@click 默认传递原生的事件对象

news2025/2/9 1:07:18

项目场景

[Day1]

<template>
  <div id="app">
    <h1>小黑记事本</h1>
    <button @click="handleClick">www</button>
    <div class="head">
      <!-- 按键（回车）按下，出发add事件，和button的事件一样 -->
      <input
        @keyup.enter="add"
        v-model="todoName"
        type="text"
        placeholder="请输入待办事项"
      />
      <button @click="add">添加任务</button>
    </div>
    <section class="body">
      <ul>
        <li v-for="(item, index) in todoList" :key="item.id">
          <span>{{ index + 1 }}</span>
          <span class="content">{{ item.name }}</span>
          <button @click="del">×</button>
        </li>
      </ul>
    </section>

    <div v-show="todoList.length > 0" class="footer">
      <span
        >合计：<strong>{{ todoList.length }}</strong></span
      >
      <button @click="clear()">清空任务</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todoName: "",
      todoList: [
        { id: 1, name: "吃水果" },
        { id: 2, name: "喝酸奶" },
      ],
    };
  },
  methods: {
    handleClick(clickval) {
      console.log("clickval", clickval);
      console.log("clickval.target", clickval.target);
      console.log("clickval.target.value", clickval.target.value);
    },
    del(tt) {
      console.log("tt", tt);
      this.todoList = this.todoList.filter((item) => item.id != tt);
    },
    add() {
      if (this.todoName.trim() == "") {
        alert("请输入内容");
        return;
      }

      this.todoList.unshift({
        id: +new Date(),
        name: this.todoName,
      });
      this.todoName = "";
    },

    clear() {
      this.todoList = [];
    },
  },
};
</script>

问题

在这段代码中，为什么在使用时没传递参数 <button @click=“del”>×，但是这里还是有参数传递进来了 del(tt) { console.log(“tt”, tt); this.todoList = this.todoList.filter((item) => item.id != tt); },

解答

在Vue中，当你在模板的某个元素上使用事件监听器（例如 @click=“del”），如果没有提供任何参数，Vue将默认传递原生的事件对象（通常表示为$event）作为参数至该方法。在你的代码中，<button @click=“del”>× 这段会在点击时自动传递点击事件的事件对象作为参数到 del 方法。
在这里插入图片描述

但是，根据你的 del 方法的实现和调用方式：

del(tt) {
  console.log("tt", tt);
  this.todoList = this.todoList.filter((item) => item.id != tt);
},

你似乎期望传入的参数是一个 id，而不是事件对象。为了使其按照期望工作，你应该在调用 del 方法时显式传递 item.id，类似这样：

<button @click="del(item.id)">×</button>

这样每个按钮就会调用 del 方法，并将其对应待办事项的 id 作为参数传进去，而不是事件对象。这将允许你根据 id 来过滤出不想要删除的待办事项。完整的 li 元素如下：

<li v-for="(item, index) in todoList" :key="item.id">
  <span>{{ index + 1 }}</span>
  <span class="content">{{ item.name }}</span>
  <button @click="del(item.id)">×</button>
</li>