当我在父级为 v-for 的输入元素上使用 v-model 时，它一次只能让我输入 1 个字符

Question

我正在使用 Vue 开发一个待办事项列表应用程序。但是我在尝试实现对待办事项名称的编辑时遇到了一个问题。这是我的待办事项列表模板：

<div v-for="(todo, index) in todos" :key="todo.title" class="todo-item">
  <div>
    <!-- <div v-if="!todo.editing" class="item-label"
      @dblclick="editTodo(todo)" >{{ todo.title }}</div> -->
    <input
      @dblclick="todo.editing = true"
      @blur="todo.editing = false"
      @keydown.enter="todo.editing = false"
      class="item-edit"
      type="text" :readonly="!todo.editing ? true : null"
      v-model="todo.title">
  </div>
  <div class="remove-item" @click="removeTodo(index)">
    &times; 
  </div>
</div>

我最初有一个 div 包含待办事项 title。但是现在我已经用一个输入替换了它，这是只读的但是当双击变成一个正常的输入。但是，当输入可编辑时，在取消选择之前我只能输入 1 个字符。我相信这是因为每次我输入一个字符时，待办事项列表都会更新，因此它会取消选择。我该如何解决这个问题？

Answer 1

我稍微修改了您的代码，希望以下解决方案对您有所帮助。我用了两个条件来判断是显示标题还是输入框。您可以运行此处的代码片段并测试它是否符合您的目的。如果您有任何困惑，请告诉我。

new Vue({
      el: '#app',
      data: {
        todos: [
                    {
                        title: 'title- 1',
                        editing: true
                    },
                    {
                        title: 'title- 2',
                        editing: true
                    },
                    {
                        title: 'title- 3',
                        editing: false
                    }
                ],
                showInput: false,
                updateTitle: '',
                selectedIndex: -1
      },
      methods: {
        editTodo(index){
                if(this.todos[index].editing){
                    this.selectedIndex = index;
                    this.updateTitle = this.todos[index].title;
                    this.showInput = true;
                }
            },
            updateTodo(index){
                this.todos[index].title = this.updateTitle;
                this.showInput = false;
                this.selectedIndex = -1;
            },
            removeTodo(index){
                this.todos.splice(index, 1);
            }
      }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
        <div v-for="(todo, index) in todos" :key="todo.title" class="todo-item">
            <div v-if="index != selectedIndex" class="item-label" @dblclick="editTodo(index)" >
                {{ todo.title }}
                <span class="remove-item ml-2" @click="removeTodo(index)" style="cursor: pointer;"> &times; </span>
            </div>

            <input
                v-if="showInput && (index == selectedIndex)"
                class="item-edit"
                type="text"
                v-model="updateTitle"
                @blur="updateTodo(index)"
                v-on:keyup.enter="updateTodo(index)"
            >
        </div> 
    </div>

Answer 2

可能有点晚了，但对于其他有类似问题的人来说，这是因为关键是 todo.title 他正在改变输入 (v-model="todo.title" )

当我在父级为 v-for 的输入元素上使用 v-model 时，它一次只能让我输入 1 个字符

When I use v-model on input element that has a parent with v-for, it only let's me put 1 character at a time

vue.js

vuejs3

v-for

v-model