在每个VUEJS3的顶部弹出

Question

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

我有一个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，但我希望你能理解。