我正在尝试在渲染的列表中使用来自API请求的自定义内容打开一个弹出窗口。
目前，我有以下代码：
1
920<template>
<div class="biblio__all">
<a v-for="i in items" v-bind:key="i.id" class="biblio__item">
<div class="biblio__text">
<h3 class="biblio__title">{{ i.gsx$titre.$t }}</h3>
<p class="biblio__author">{{ i.gsx$auteur.$t }}</p>
</div>
</a>
<div class="hidden">这里放弹出窗口的内容</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data () {
return{
items: [],
}
},
created(){
this.axios.get("///API URL")
.then(response => (this.items = response.data.feed.entry))
},
methods: {
}
})
</script>
我希望在v-for中有另一个隐藏的div，当我点击链接时，弹出窗口出现。
我在items数组中有弹出窗口的所有数据。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你可以为每个项目创建一个单独的组件，并在该组件中处理其模态状态。你可以使用bootstrap、bulma或纯html、css来制作模态框。使用
v-show="modalState"来隐藏或显示模态框。在你的子组件中定义modalState：data() { return { modalState: false } }你的最终结构：
<div class="biblio__all"> <a v-for="i in items" v-bind:key="i.id" class="biblio__item"> <!-- 拥有模态框和主要项目代码的组件 --> <subitem :item="i" /> </a> </div>