0
点赞
收藏
分享

微信扫一扫

Vue中使用API内容渲染的弹出列表的打开方式

要在Vue中实现点击链接打开一个弹出窗口,你可以按照以下步骤进行操作:

  1. 首先,为每个链接添加一个点击事件处理程序。你可以使用 @click 指令来做到这一点。在你的模板中的链接元素上添加该指令,如下所示:

<a v-for="i in items" v-bind:key="i.id" class="biblio__item" @click="openPopup(i)">

  1. 接下来,在你的Vue组件的 methods 部分中定义一个名为 openPopup 的方法,并传入被点击链接的数据作为参数。在该方法中,你可以将点击的链接的数据存储到一个临时变量中,以便在弹出窗口中使用。同时,你还需要设置一个标志位来控制弹出窗口的显示与隐藏。这里我们使用一个名为 showPopup 的布尔值来控制:

export default defineComponent({
    data() {
        return {
            items: [],
            showPopup: false, // 控制弹出窗口的显示与隐藏
            popupData: null // 存储被点击链接的数据
        }
    },
    methods: {
        openPopup(data) {
            this.popupData = data; // 存储被点击链接的数据
            this.showPopup = true; // 显示弹出窗口
        }
    }
})

  1. 在你的模板中,将弹出窗口的内容放在一个 div 中,并使用条件渲染指令 v-if 来控制其显示与隐藏。在这个 div 中,你可以访问存储在 popupData 变量中的数据。例如:

<div class="popup" v-if="showPopup">
  <h3>{{ popupData.gsx$titre.$t }}</h3>
  <p>{{ popupData.gsx$auteur.$t }}</p>
</div>

通过以上步骤,在点击链接时,弹出窗口将根据被点击链接的数据动态地显示其内容。

举报

相关推荐

0 条评论