Vue中使用API内容渲染的弹出列表的打开方式
P粉212971745
P粉212971745 2023-08-28 19:21:43
[Vue.js讨论组]
<p>我正在尝试在渲染的列表中使用来自API请求的自定义内容打开一个弹出窗口。</p> <p>目前,我有以下代码:</p> <pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;div class=&quot;biblio__all&quot;&gt; &lt;a v-for=&quot;i in items&quot; v-bind:key=&quot;i.id&quot; class=&quot;biblio__item&quot;&gt; &lt;div class=&quot;biblio__text&quot;&gt; &lt;h3 class=&quot;biblio__title&quot;&gt;{{ i.gsx$titre.$t }}&lt;/h3&gt; &lt;p class=&quot;biblio__author&quot;&gt;{{ i.gsx$auteur.$t }}&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;div class=&quot;hidden&quot;&gt;这里放弹出窗口的内容&lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script lang=&quot;ts&quot;&gt; import { defineComponent } from &quot;vue&quot;; export default defineComponent({ data () { return{ items: [], } }, created(){ this.axios.get(&quot;///API URL&quot;) .then(response =&gt; (this.items = response.data.feed.entry)) }, methods: { } }) &lt;/script&gt;</pre> <p>我希望在v-for中有另一个隐藏的div,当我点击链接时,弹出窗口出现。</p> <p>我在items数组中有弹出窗口的所有数据。</p>
P粉212971745
P粉212971745

全部回复(1)
P粉063039990

你可以为每个项目创建一个单独的组件,并在该组件中处理其模态状态。你可以使用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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号