弹出在彼此之上 VUEJS3

Question

我想放几个按钮，每个按钮打开一个不同的弹出窗口。弹出窗口将打印有关其 Button 的数据。

我有一个 Popup.vue 组件：

<template>
    <div class="popup">
        <div class="popup-inner">
            <slot />
            <Button class="popup-close" @click="TogglePopup()">
                Close
            </Button>
        </div>
    </div>
</template>

<script>
export default {
    props: ['TogglePopup']
}
</script>

在另一个 .vue 中，我这样称呼它：

    <template>
        <div v-for="infoItem in data" :key="infoItem.name"> // loop to create several buttons
    
           <Button
              icon="pi pi-eye"
              @click="() => TogglePopup('buttonTriggerDetail')">
           </Button>
    
           <Popup
             v-if="popupTriggers.buttonTriggerDetail"
             :TogglePopup="() => TogglePopup('buttonTriggerDetail')"
           >
           {{ 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({
      buttonTriggerDetail: false
    });
    const TogglePopup = (trigger) => {
      popupTriggers.value[trigger] = !popupTriggers.value[trigger];
    };

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

所以它打印了几个按钮，但是当我点击一个按钮时，它不会用这个按钮的数据打开弹出窗口，它总是打印最后一个按钮的数据。我认为实际上它会将所有弹出窗口放在一起。

我怎样才能只打开具有良好数据的良好弹出窗口？ 谢谢

Answer 1

错误是当您只需要一个带有某些道具的弹出窗口时，您正在渲染 3 个弹出窗口。将您的弹出窗口想象为选项卡：让弹出窗口通过单击某个按钮并传入您需要的道具来呈现，例如：

<template>
 <div v-for="infoItem in data" :key="infoItem.name"> // loop to create several buttons
  <Button
   icon="pi pi-eye"
   @click="clickHandler">
  </Button> 
 </div>
 <Popup
   v-if="popupTriggered"
   :TogglePopup="() => TogglePopup('buttonTriggerDetail')"
 >
   {{ data[currentActiveItem].control }}
 </Popup>
</template>

<script>

import ...

export default {
  data () {
    currentActiveItem: 0,
    popupTriggered: false
  },
  methods: {
    clickHandler (index) {
      this.popupTriggered = true
      this.currentActiveItem = index
    }
  }
... // other component data
};
</script>

我用 Vue 2 风格编写了我的示例，因为我还没有使用过 Composition API，但我希望你明白这一点。