如何在 vue js 中使用编辑选项答案

【问题标题】：how to use edit option in vue js如何在 vue js 中使用编辑选项
【发布时间】：2020-05-20 19:48:37
【问题描述】：

我想编辑一个待办事项并创建了一种在切换编辑按钮上显示文本输入的方法。但是当它被点击时，它会在所有的待办事项中嵌入输入框。

这是代码

<template>

  <div class="todos mt-4 mx-auto">

    <div class="todo-item" v-bind:class="{'is-complete':currentTodo.completed}" v-for="currentTodo in todos" :key="currentTodo.id">

      <div class="todo-details">
        <div v-show="!isEditing">
          <input type="checkbox" v-on:change="markComplete(currentTodo)">
          <span>{{currentTodo.title}}</span>
        </div>

        <div v-show="isEditing">
          <EditTodos></EditTodos>
        </div>

      </div>


      <div class="todo-controls">

        <button class="button btn-primary mx-2 edit" @click="edit" >
          <i class="far fa-edit"></i>
        </button>

        <button class="button btn-danger del" @click="deleteTodo(currentTodo.id)">
          <i class="fas fa-trash"></i>
        </button>

      </div>


    </div>

  </div>

</template>

<script>

import EditTodos from './EditTodo'

export default {
  components: {
    EditTodos,
  },
  props: ['todos'],

  data (){
    return {
      isEditing:false,
    }
  },
  methods: {
    markComplete: function(currentTodo){
      currentTodo.completed = !currentTodo.completed
    },
    deleteTodo: function(id){

      let newTodos ;
      newTodos = this.todos.filter(todo => todo.id !== id)

      // Send up to parent
      this.$emit("new-todos",newTodos)

    },
    edit: function(){
      this.isEditing = !this.isEditing
    }
  },


}

另一个组件的代码是

<template>

  <div>

    <input type="text" >
    <button>
      update & close
    </button>

  </div>

</template>

<script>
export default {

}
</script>

output1 output2

在第一个组件中使用循环来呈现待办事项，而在另一个组件中，我只是在单击编辑按钮时使用条件来呈现编辑输入框

我只想在触发编辑按钮的待办事项中显示到输入框

【问题讨论】：

"isEditing" 必须是 "currentTodo" 的一个属性，否则它将是一个全局变量
我是 vue 的初学者。你能告诉我我该怎么做吗

标签： vue.js vuejs2 vue-component

【解决方案1】：

您应该存储正在编辑的待办事项（或其 ID），而不是切换 isEditing 布尔值，然后在循环时仅在 currentTodo.id === editedTodo.id 时显示编辑表单。

话虽如此，这种逻辑最好在 Todo 组件中处理（使用它自己的复选框来显示它自己的编辑输入）。

【讨论】：