Javascript 如何将vue中的其他同级值更改为？

使用带有待办事项列表的vue四处玩

在这一阶段，我可以通过编辑按钮显示列表，文本将作为输入，这样我就可以编辑待办事项。但例如，如果我有10个项目，并且我为项目2、项目4和项目5单击了编辑，那么所有这3个项目都将变为输入

我的想法是，如果我点击第4项，第2项将变回文本，所以如果点击编辑，只有一项将显示输入

我有我的模板代码如下

<td class="col-8">
  <!-- if editable is false, show the checkbox and todo item -->
  <div class="custom-control custom-checkbox" v-if="!editable">
      {{ todo.item }}
  </div>

  <!-- if editable is true, turn item into an input so user can enter new value -->
  <div v-else>
    <input ref="editItem" type="text" class="form-control" :value="todo.item" @input="onInput">
  </div>
</td>
<td class="col-2">
  <button
    class="btn btn-sm"
    :class="editable ? 'btn-outline-success' : 'btn-outline-info'"
    @click.prevent="editable ? onSave() : onEdit()">{{ editable ? 'save' : 'edit' }}
  </button>
</td>

{{todo.item}}
{{可编辑？'save'：'edit'}

当我在chrome中打开vue inspect时，我可以看到所有项目都有其不同的数据值。 我如何改变其他兄弟姐妹的价值观

---

提前感谢您提供的建议和建议。

我不建议您更改另一个兄弟姐妹的价值，因为您无法确定它可能导致的副作用，显然，当您查看待办事项列表时，会觉得没有副作用，但在一般实践中，节点应更改父级中位于其下方的元素，既不在其上方也不在其同级中

如果你想改变上面的元素，它总是通过事件驱动。你让父母知道有些事情需要改变，而不是自己去改变

这是您可以在此处执行的操作：

与其将

editable

用作数据属性，不如将其用作TodoListItem组件的道具

在子组件中单击“保存/编辑”按钮时，不要更改其中的值，而是使用类似这样的事件

发出此事件后，在父级

TodoList

组件中，捕获此事件并更改项的状态，如下所示：

通过事件和道具驱动组件的次数越多，组件的可重用性就越高。始终有一个orchestrator组件，该组件通过处理这些

无状态的
组件发出的事件并通过props发送状态来操作这些组件

这是我一直遵循的方法，它总是允许我干净快速地重构

关于。
所以基本上说是让家长来控制，当点击
edit
时，子列表将
$emit
发送给家长，并使用项目的
id
在家长中呈现时与列表进行比较，然后将
可编辑的
道具传递给孩子我同意，默认情况下，路径是props和emits，作为跨组件上下推送数据的通信机制。如果这变得过于笨拙，即必须通过多个子组件支撑钻取或通过多个父组件中继发射，那么您通常会看到建议移动到Vuex之类的状态管理模块。@MikeWright完全理解是否有层要去，只是还没有真正深入研究vuex，非常想在学习后尽快列出使用vuex的待办事项列表。但我认为，即使目前我没有上下传递几层，使用vuex还是比较好，这样就不需要传递层了？保留道具的deepCopy而不是直接更改道具，这意味着如果我编辑了我的道具值
onSave
方法，它调用api进行编辑，但在请求成功后，我不应该执行类似于
this.todo.item=newItemValue
的操作，而是
$emit
到我的所有项目列表数据所在的父级？@Dora是的，更改prop值总是会导致意外行为。父组件中的值在父组件不知道的情况下通过引用更改，因此，假设您在父组件中添加了一个中间事件，但不知道它期望的值已更改，这将导致不希望的结果。最重要的是，这种在父组件中显式设置值的方法更具可读性，否则，如果更改prop的值，父组件的值将更改，但新开发人员将永远无法理解发生了什么以及为什么。
    props: {
      editable: {
        type: Boolean,
        default: false
      },
    }

/** You should keep a deepCopy of the props if you are changing the state
 of that object and then send the updated local data prop to the parent 
 as well for updation rather than changing the prop object.
 NEVER CHANGE THE PROP OBJECT DIRECTLY. -> this.todoItem = 
 this.deepCopy(this.todo); 
 Do this in before mount hook of the child component.
**/
this.$emit('todo-item-action', action, todoItem);

      <todo-list-item
        v-for="todo in todos"
        :key="todo['id']"
        :todo="todo"
        :editable="todo['editable']"
        @todo-item-action="handleItemAction"
      >

      <todo-list-item
        v-for="todo in todos"
        :key="todo['id']"
        :todo="todo"
        :editable="editableItem === todo['id']"
        @todo-item-action="handleItemAction"
      >