1

我创建了两个名为Tasks.vue和的文件Task.vue。我从名为“删除任务”的动作中发出一个动作，我想在使用Task.vue时再次发出它Tasks.vue@delete-task

eslint-plugin-vue给我以下错误：

'v-on' 指令需要一个值或动词修饰符（如 'stop' 或 'prevent'

任务.vue

<template>
  <div class="tasks-container">
    <div v-for="task in tasks" :key="task.id">
      <Task @delete-task:"$emit('delete-task', task.id)" :task="task" />
    </div>
  </div>
</template>

<script>
import Task from "./Task.vue";
export default {
  name: "Tasks",
  props: {
    tasks: Array,
  },
  components: {
    Task,
  },
  emits: ['delete-task']
};
</script>

任务.vue

<template>
  <div :class="[task.reminder ? 'reminder' : '', 'task']">
    <h3>
      {{ task.text }}
      <i @click="onDelete(task.id)" class="fa fa-times"></i>
    </h3>
    <p>{{ task.day }}</p>
  </div>
</template>
<script>
export default {
  name: "Task",
  props: {
    task: Object,
  },
  methods: {
    onDelete(id) {
      this.$emit('delete-task', id)
    },
  },
};
</script>

为什么我需要“停止”或“阻止”修饰符？

4

2 回答 2

3

模板内的事件值是使用=而不是分配的:

@delete-task="$emit('delete-task', task.id)"
于 2021-09-18T11:47:34.150 回答
3

这一行是错误的：

<Task @delete-task:"$emit('delete-task', task.id)" :task="task" />

通过以下方式修复它：

<Task @delete-task="$emit('delete-task', task.id)" :task="task" />
于 2021-09-18T11:48:44.617 回答