时间戳

首页 > 解决方案 > 如何将 v-for 数据传递到 VueJS 中的模态

vue.js - 如何将 v-for 数据传递到 VueJS 中的模态

问题描述

列出我的帖子后，我想制作一个模式，打开时会从该帖子中获取 youtube id，并将其粘贴到 b-embed src 链接中，以显示与帖子对应的 youtube 视频

<template>
<div>
    <ul>
        <li id="posts" v-for="post in posts" v-bind:key="post.name">
            <b-card no-body style="max-width: 20rem;" class="md-elevation-12" v-if="post.tag === 'game'">
                <b-card-body>
                    <md-card-media>
                        <img :src="
                'http://img.youtube.com/vi/' + post.yturl + '/hqdefault.jpg'
              " />
                    </md-card-media>
                    <b-card-title>{{ post.name }}</b-card-title>
                    <b-card-text></b-card-text>
                </b-card-body>
                <b-card-body>
                    <b-button v-b-modal.modal-xl="'game'" @click="sendInfo(post)" variant="outline-secondary">Xem</b-button>
                </b-card-body>
            </b-card>
        </li>
    </ul>
    <b-modal size="xl" id="game" :title="selectedPost.name">
        <b-embed type="iframe" aspect="16by9" :src="'https://www.youtube.com/embed/' + selectedPost.yturl" allowfullscreen></b-embed>
    </b-modal>
</div>
</template>

<script>
import db from "@/db";

export default {
    name: "GameView",
    name: "MediaCover",
    data() {
        return {
            showDialog: false,
            posts: [],
            selectedPost: '',
            playerVars: {
                autoplay: 0,
            },
        };
    },
    methods: {
        playing() {},
        modalId(i) {
            return "game";
        },
        sendInfo(post) {
            this.selectedPost = post;
        },
    },
    props: {
        msg: String,
    },
    created() {
        db.collection("holoposts")
            .orderBy("date")
            .get()
            .then((querySnapshot) => {
                querySnapshot.forEach((doc) => {
                    this.posts.push(doc.data());
                });
            });
    },
};
</script>

但是正如您所看到的，它遇到了无法指定 yturl 的问题，因为模态在 v-for 之外。如果我把它放在里面，模式会循环打开所有的帖子。

编辑既然解决了，我将把上面的代码编辑成正确的，这样任何人都可以看到

标签： vue.jsbootstrap-vue

解决方案

需要一个单一的模式，当所选帖子发生变化时，只是内容发生变化。你可以尝试这样的事情：

<b-button v-b-modal.modal-xl="'game'" click="sendInfo(post)"
<!-- -->
<b-modal size="xl" id="game">
  <b-embed v-if="selectedPost" type="iframe" aspect="16by9" :src="'https://www.youtube.com/embed/' + selectedPost.yturl" allowfullscreen></b-embed>
</b-modal>

并确保从 data() 返回 selectedPost，不知道为什么它在外面。

推荐阅读