[Vuejs]-How to pass v-for data into modal in VueJS

by

2👍

✅

A single modal is needed, just the content changes when the selected post changes.
You can try something like this:

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

And make sure selectedPost is returned from data(), not sure why it’s outside.

👤Renaud

1👍

I think you can allow you code as it but in the modal change post.yturl to chosenPost.yturl, add it to data and add an event(for example click event) to the post card and when it update it to be the chosenPost like so @click.prevent = choosePost(post) and then in your data methods add this method

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

That should do

👤Nsoseka

Leave a comment