Question

我正在尝试编辑v-for中呈现的特定待办事项。但我的所有todo都同时进入编辑模式。我是Vue的新手。

<template>
<div>
    <h1>All Todos</h1>
    <div v-for="todo in todos">
        <h4 v-if="editTodo===false">{{ todo.content }} <span class="label label-primary" @click="editTodoFun(todo)">Edit</span></h4>
        <div v-if="editTodo===true">
           <input type="text" v-model="editTodoVal" >
        </div>
    </div>
</div>
</template>

<script>
    export default {
    data () {
        return {
            editTodo: false
        }
        },
    computed: {
    todos() {
        return this.$store.getters.getAllTodoDetails;
    }
    },
    methods: {
       editTodoFun(x) {
           this.editTodo = true;
       }
    }
    }
</script>

当我点击编辑时，editTodo对所有项目都变为true。非常感谢你。

Answer 1

最简单的方法是向待办事项对象添加editing属性。

然后你可以使用

v-if="todo.editing"

而不是全局editTodo。

<div v-for="todo in todos">
    <h4 v-if="!todo.editing">{{ todo.content }} <span class="label label-primary" @click="todo.editing = true">Edit</span></h4>
    <div v-if="todo.editing">
       <input type="text" v-model="todo.content">
       <span class="label label-success" @click="todo.editing = false">Edit</span>
    </div>
</div>

下面是一个略微修改的版本作为示例。

new Vue({
  el: "#app",
  data() {
    return {
      todos: [{
          content: "Learn Vue",
          editing: false
        },
        {
          content: "Learn JavaScript",
          editing: false
        }
      ]
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <h1>All Todos</h1>
  <div v-for="todo in todos">
    <h4 v-if="!todo.editing">{{ todo.content }} <button class="label label-primary" @click="todo.editing = true">Edit</button></h4>
    <div v-if="todo.editing">
      <input type="text" v-model="todo.content">
      <button class="label label-success" @click="todo.editing = false">Save</button>
    </div>
  </div>
</div>

停止访问v-for中的所有值

1 个答案: