Question

我正在制作一个基本的“待办事项”应用程序，其中有一个输入字段，在输入任务并按“ Enter”键后，任务将出现在列表中。 TodoCard.vue组件与任务一起还生成了一个按钮，我想用它来删除任务。

我已经向按钮添加了@click="removeTodo"方法，但是不知道将其放置在TodoCard组件还是App.vue文件中的位置？

TodoCard组件：

<template>
  <div id="todo">
    <h3>{{ todo.text }}</h3>
    <button @click="removeTodo(todo)">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    removeTodo: function (todo) {
  this.todos.splice(this.todos.indexOf(todo), 1)
    }
  }
}
</script>

App.vue：

<template>
  <div id="app">
    <input class="new-todo"
    placeholder="Enter a task and press enter."
    v-model="newTodo"
    @keyup.enter="addTodo">
    <TodoCard v-for="(todo, key) in todos" :todo="todo" :key="key" />
  </div>
</template>

<script>
import TodoCard from './components/TodoCard'

export default {
  data () {
    return {
      todos: [],
      newTodo: ''
    }
  },
  components: {
    TodoCard
  },
  methods: {
    addTodo: function () {
      // Store the input value in a variable
      let inputValue = this.newTodo && this.newTodo.trim()

      // Check to see if inputed value was entered
      if (!inputValue) {
        return
      }

      // Add the new task to the todos array
      this.todos.push(
        {
          text: inputValue,
          done: false
        }
      )

      // Set input field to empty
      this.newTodo = ''
        }
      }
    }
    </script>

删除任务的代码是否还正确？

Answer 1

您可以向父母发送事件，通知父母在子组件中单击了删除按钮。

您可以在Vue的documentation中查看更多信息。

这是您的组件的外观：

TodoCard.vue：

<template>
  <div id="todo">
    <h3>{{ todo.text }}</h3>
    <button @click="removeTodo">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    removeTodo: function (todo) {
       this.$emit('remove')
    }
  }
}
</script>

App.vue：

<template>
  <div id="app">
    <input class="new-todo"
    placeholder="Enter a task and press enter."
    v-model="newTodo"
    @keyup.enter="addTodo">
    <TodoCard v-for="(todo, key) in todos" :todo="todo" :key="key" @remove="removeTodo(key)" />
  </div>
</template>

<script>
import TodoCard from './components/TodoCard'

export default {
  data () {
    return {
      todos: [],
      newTodo: ''
    }
  },
  components: {
    TodoCard
  },
  methods: {
    addTodo: function () {
      // Store the input value in a variable
      let inputValue = this.newTodo && this.newTodo.trim()

      // Check to see if inputed value was entered
      if (!inputValue) {
        return
      }

      // Add the new task to the todos array
      this.todos.push(
        {
          text: inputValue,
          done: false
        }
      )

      // Set input field to empty
      this.newTodo = ''
        }
      },
     removeTodo: function(key) {

       this.todos.splice(key, 1);

     }
    }
    </script>

如何使用App.vue中的方法定位另一个组件中的按钮？

1 个答案: