Question

列出我的帖子后，我想做一个模式，当打开时会从该确切帖子中获取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>

但是正如您所看到的，由于模态在v-for之外，因此遇到了无法指定yturl的问题。而且，如果我将其放在里面，模态将循环打开所有帖子。

编辑解决此问题后，我将上面的代码编辑为正确的代码，以便任何人都可以看到

Answer 1

需要一个模态，仅当所选帖子更改时内容也会更改。您可以尝试这样的事情：

<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>

并确保selectedPost是从data（）返回的，不确定它为什么在外面。

Answer 2

我认为您可以使用它进行编码，但是在模式post.yturl到chosenPost.yturl的更改中，将其添加到data并在帖子中添加一个事件（例如click event）卡，并将其更新为chosenPost之类的@click.prevent = choosePost(post)，然后在您的数据方法中添加此方法

choosePost(post) {
  this.chosenPost = post;
}

那应该做

如何在VueJS中将v-for数据传递到模态

2 个答案: