Looping through a Vue Bootstrap modal using a v-for directive

Question

Looping through a Vue Bootstrap modal using a v-for directive

I am working on a Vue Bootstrap modal placed within a v-for loop. I need to replace the '1' in both 'v-b-modal.modal-1' and 'modal-1' with the index value, which I can access as {{ index }} while looping through the items. However, I am struggling to find a way to dynamically add this index to the end of each identifier.

<div v-for="(movie, index, i) in movies">
  <b-button :key="index" :v-b-modal="'modal-' + index">Launch demo modal</b-button>
  <b-modal :id="'modal-' + index" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

javascript vue.js bootstrap-4

Answer 1

Answer №1

When considering the ability to apply modifiers dynamically, the answer is No; it must be static.

However, in relation to a Bootstrap modal, I came across an interesting approach during my research for a solution.

I have found that you can achieve dynamic manipulation by passing the modifier as a value, similar to an id, and since the value is a JS expression, you have flexibility in how you handle it.

<b-button v-b-modal="'modal-1'">Launch demo modal</b-button>

<div v-for="(movie, index, i) in movies">
  <b-button v-b-modal="'modal-1'">Launch demo modal</b-button>
  <b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

Answer 2

When considering the ability to apply modifiers dynamically, the answer is No; it must be static.

However, in relation to a Bootstrap modal, I came across an interesting approach during my research for a solution.

I have found that you can achieve dynamic manipulation by passing the modifier as a value, similar to an id, and since the value is a JS expression, you have flexibility in how you handle it.

<b-button v-b-modal="'modal-1'">Launch demo modal</b-button>

<div v-for="(movie, index, i) in movies">
  <b-button v-b-modal="'modal-1'">Launch demo modal</b-button>
  <b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

Looping through a Vue Bootstrap modal using a v-for directive

Answer №1

Similar questions

Restrict Text Input Field to Accept Only Specific Domain

What causes the discrepancy in calculating marginTop on a desktop browser compared to a mobile browser?

Gulp is showing an error of "Module Not Found" despite the module being present in the project

Is your Firebase .push() function encountering errors when trying to update the database?

Encountering a VUE error during unit testing operations

Implementing a variety of threshold colors in Highcharts

Guide to ensuring the navbar remains at the top of the webpage following an image

Exploring the Enzyme library in React to trigger an onClick event with a specific parameter

Experiencing difficulties with mocha and expect while using Node.js for error handling

Looking to incorporate an additional column 'LastName' that can be used for filtering in the Angular data table code. This column will be included if it is present in the data

Why do I keep encountering invalid errors with Vuelidate and TailwindCSS?

What could be the reason for the Azure server sending a Bad Request response?

developing a deferred commitment by utilizing promise objects

Could a javascript loop be created to continuously activate a button with each iteration?

Sending data from jQuery modal to the final input field

Guide to activating a watcher once the page finishes loading

Utilizing global SCSS styles in a Vue project alongside distinct SCSS mixin and variable files

Storing JSON data in a MongoDb database using the Sails.js framework

Prevent onlick actions until JavaScript function has completed

The functionality of uploading files in Dropzone.js is not supported on Windows operating systems