javascript - 在 v-for 循环中定位特定索引

Question

我目前正在使用 VueJS 构建一个 crud 应用程序，需要在数据库中执行更新操作。

我将所有文档拉入一个集合中，如下所示:

<div class="events" v-for="(event, index) in GETEVENTS" :key="index">
  <ul class="list">
    <li>Name: <strong v-if="!change">{{event.name}}</strong><input v-else v-model="event.name"></li>
    <li>Location: <strong v-if="!change">{{event.location}}</strong><input v-else v-model="event.location"></li>
    <li>Capacity: <strong v-if="!change">{{event.qty}}</strong><input v-else v-model="event.qty"></li>
    <li>Price: <strong v-if="!change">${{event.price}}</strong><input v-else v-model="event.price"></li>
    <li>Description: <strong v-if="!change">{{event.description}}</strong><textarea v-else v-model="event.description"></textarea></li>
  </ul>
  <div class="actions">
    <button class="edit" @click="change = !change">Edit</button>
    <button class="delete" @click.prevent="DELETEEVENT(event._id)">Delete</button>
  </div>
</div>

所以元素以列表格式出现，在列表中我添加了仅在变量 change 为 true 时显示的输入。

但是，由于该变量是全局变量，因此显示所有数组项的所有输入。如何使用此方法定位一个特定的数组项？

我完美地关闭了删除功能。是更新给我带来了问题。

如果其他方法更简单/更好，我愿意接受。

感谢阅读。

Answer 1

将您的 change 变量从 bool 值更改为您要编辑的 event._id 的表示形式。

data: () => ({
  change: null // start with null,
  GETEVENTS: [] // or whatever you currently have
})

然后通过您的编辑按钮设置该 ID

<button class="edit" @click="change = event._id">Edit</button>

通过将 change 与 event._id 进行比较来切换输入

<strong v-if="event._id = change">

---

最后，您使用 event._id 作为您的 :key 绑定(bind)，让 Vue 更好地跟踪它正在处理的对象

<div class="events" v-for="event in GETEVENTS" :key="event._id">

如果您开始对事件列表进行排序或过滤，这将特别有用。