Vue3循环生成按钮打开对应Popup时仅显示最后一条数据如何解决

所有循环渲染的按钮和弹窗都共用了同一个触发状态字段popupTriggers.buttonTriggerDetail，点击任意按钮都会将该字段置为true，导致所有弹窗同时渲染，最后一个渲染的弹窗层级最高会覆盖其他所有弹窗，因此只会显示最后一项的关联数据。

调整模板绑定逻辑 #

将弹窗触发的唯一标识替换为每个循环项的唯一值，此处直接复用你循环已配置的infoItem.name作为唯一标识即可：

<template>
  <div v-for="infoItem in data" :key="infoItem.name">
    <Button
      icon="pi pi-eye"
      @click="() => TogglePopup(infoItem.name)"
    ></Button>

    <Popup
      v-if="popupTriggers[infoItem.name]"
      :TogglePopup="() => TogglePopup(infoItem.name)"
    >
      {{ infoItem.control }}
    </Popup>
  </div>
</template>

调整状态触发逻辑 #

适配动态生成的弹窗标识，不需要提前预定义所有触发字段：

<script>
// 原有import逻辑保持不变
export default {
  computed: {
    data() {
      return this.$store.state.data;
    },
  },
  mounted() {
    this.$store.dispatch("getData");
  },

  setup() {
    // 不需要提前预定义触发字段，改为空对象动态存储
    const popupTriggers = ref({});
    const TogglePopup = (trigger) => {
      // 不存在的标识默认按false处理，再取反实现开关效果
      popupTriggers.value[trigger] = !popupTriggers.value[trigger] ?? true;
    };

    return {
      Popup,
      TogglePopup,
      popupTriggers,
    };
  },
};
</script>

修改后每个按钮只会触发对应唯一标识的弹窗显示，不会出现多弹窗重叠的问题，展示的数据也会和对应按钮的关联数据匹配。

内容的提问来源于stack exchange，提问作者Kate P