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

Experiencing difficulties in installing opensea-js using NPM

What kind of interference occurs between the sibling components when a div with ng-if is present in Angular?

Add a JavaScript file into a PHP document

Can anyone provide guidance on how to trigger 3 unique functions in a specific order using JavaScript?

Transforming a set of properties into an organized array

Unable to utilize the three.js texture loader within a JavaScript worker environment

A highly effective method for nesting items within a list through recursive functions

Adjusting Chart.js line graph alignment to the left

What makes this effective in JavaScript?

experiencing a problem with the scrollTo() function

Position items at the center of the grid in material UI

Developing a custom CSS for React using clamp and focus attributes

javascript verify that the input is a valid JSON object

Challenges faced when using jQuery UI autocomplete

Is there a way to enclose an element with two other elements using JavaScript/jQuery

Restrict the number of rows in a real-time search JSON data by utilizing the $.each method

Getting a variable from an ajax call and using it in a Pug template

Revamping MapReduce in MongoDB Version 2.4

Avoiding Duplicate Form Submissions Without JavaScript

Tips on validating multiple forms with the same name in AngularJS