Question

我一直在使用VueJS制作一个简单的To Do应用程序。我有添加新的待办事项，删除待办事项并将其标记为已完成的功能，但是我在“双击以编辑任务”功能方面感到困惑。

我添加了一个输入字段，当用户双击任务以对其进行编辑但似乎什么都没发生时，该字段应该出现？任何帮助都会很棒：）

App.vue：

<template>
  <div id="app">
    <div class="container">
      <div class="row">
        <h1>VueJS To Do Manager:</h1>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <input class="new-todo input-group col-xs-12"
        placeholder="Enter a task and press enter. Use the checkbox to mark them as done."
        v-model="newTodo"
        @keyup.enter="addTodo">
      </div>
    </div>
    <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>

TodoCard.vue组件：

<template>
  <div id="todo">
    <div class="container">
      <div class="row">
        <input class="check" type="checkbox" />
        <h3 class="col strikethrough"
        @dblclick="editTodo(todo)">{{ todo.text }}</h3>
        <div v-show="todo.edit == false">
          <input v-show="todo.edit == true"
          v-model="todo.title"
          v-on:blur="todo.edit=false; $emit('update')"
          @keyup.enter="todo.edit=false; $emit('update')">
        </div>
        <hr>
        <button @click="removeTodo"
        type="button"
        class="btn btn-danger btn-sm">Delete</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    removeTodo: function (todo) {
      this.$emit('remove')
    },
    editTodo: function (todo) {
      this.editedTodo = todo
    }
  }
}
</script>

Answer 1

我认为您在双击待办事项说明时未将todo.edit设置为true。此外，包含todo编辑输入的div具有v-show =“ todo.edit == false”，而应为v-show =“ todo.edit == true”或仅当v-show =“ todo.edit”您确定todo.edit始终是布尔值。

如何在VueJS中实现“双击以编辑待办事项”任务？

1 个答案: