v-for 中的所有项目都发生了动作，但我想运行仅对我单击的项目进行动作

Question

我在 v-for 循环中有一个图标，我希望该操作专门针对一个图标执行，但由于 v-for 而重复的所有图标都会发生这种情况。

<template>
  <div>
    <tr
      v-for="(randomData, randomIndex) in obj['randomData']"
      :key="randomIndex"
      class="random-table"
    >
      <td data-label="Activity Alert">
        <el-popover
          v-model="remindMeVisibility"
          placement="left-start"
          width="500"
          trigger="manual"
          class="popover-form"
        >
          <RemindMe />
          <i
            slot="reference"
            class="el-icon-message-solid reminder-icon"
            @click="remindMeVisibility = true"
          ></i>
        </el-popover>
      </td>
    </tr>
  </div>
</template>

<script>
export default {
  data() {
    return {
      remindMeVisibility: false,
    }
  },
}
</script>

Answer 1

这是一个工作示例，说明如何对给定列表的每个元素进行特定的弹出窗口编辑。

<template>
  <div>
    <pre>{{ cityNames }}</pre>

    <section>
      <div v-for="city in cityNames" :key="city.id">
        <span>City {{ city.name }}</span>
        <el-popover v-model="city.popoverOpen" placement="top" width="160" class="popover">
          <el-button slot="reference">Update visibility</el-button>
          <p>Change the visibility of the City?</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="toggleCityVisibility({ id: city.id, visibility: false })">
              Hide it
            </el-button>
            <el-button type="primary" size="mini" @click="toggleCityVisibility({ id: city.id, visibility: true })">
              Make visible
            </el-button>
          </div>
        </el-popover>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityNames: [
        {
          id: 1,
          name: 'beijing',
          remindMeVisibility: false,
          popoverOpen: false,
        },
        {
          id: 2,
          name: 'shanghai',
          remindMeVisibility: false,
          popoverOpen: false,
        },
        {
          id: 3,
          name: 'guangzhou',
          remindMeVisibility: false,
          popoverOpen: false,
        }
      ]
    };
  },
  methods: {
    toggleCityVisibility({ id, visibility }) {
      console.log('id', id, 'visibility', visibility)
      this.targetedCity = this.cityNames.find(city => city.id === id)
      this.targetedCity.remindMeVisibility = visibility
    }
  },
}
</script>

<style scoped>
.popover {
  margin-left: 1rem;
}
</style>

在这里，我们确实有一个城市列表，我们想要切换它们的可见性 (remindMeVisibility)。
列表中的 id 是为了 :key 的唯一性 + 稍后在编辑它的可见性时找到它。
我没想到这里需要 popoverOpen，但确实如此（根据我的尝试，全局弹出状态不可行）。

这是它的样子

v-for 中的所有项目都发生了动作，但我想运行仅对我单击的项目进行动作

Action happening for all the items in v-for but I want to run the action on just the item I clicked on

javascript

vue.js

nuxt.js

v-for 中的所有项目都发生了动作，但我想 运行 仅对我单击的项目进行动作

Action happening for all the items in v-for but I want to run the action on just the item I clicked on

javascript

vue.js

nuxt.js

v-for 中的所有项目都发生了动作，但我想运行仅对我单击的项目进行动作