Sporadic problem with Bootstrap Vue Modal

0
votes

I have a sporadic problem with Bootstrap Vue Modal.

I’m not that experienced with Vue and I’m not able to show the entire code because of my agreement with the project owner, also, it would be too much code to show anyway, so I’ll explain the issue. I’m hoping to get some hints to see what the issue can be because I’m out of ideas. So, here is the project info and issue I’m having:

I have created an event calendar.

The calendar shows month format and events are listed inside each day.

I stored year, month and day variable in the Vue instance data section.

I created a method that sets the calendar (setCalendar: function (year, month)).

I used “created” to setup the year, month and day as the current date when the page is loaded and vue is initialized and setCalendar.

I created Previous and Next buttons and next and previous functions which when clicked, the functions deducts (month--) or adds (month++) accordingly and sets the year, month and sets the calendar, (setCalendar).

I created <b-link v-b-modal="event.today_date + '-' + (index)"> and related modals <b-modal :id="event.today_date + '-' + (index)" :title="event.event_title"> for each <b-link>

When the page is initially loaded, the links to modals work perfectly, but for example, if I click on Previous button and load June calendar and events, and click on Next button to go back to July calendar and events, there will be one or two July <b-link> that links to June modals and the rest of <b-link> for July works fine. So, when I load June calendar and events and go back to July calendar and events, about 10% of July b-links, link to the June modals and of course when I click on those b-links, it does not load the modals because the modals do not exists in July calendar.

I can see this using Vue dev tools. When I click on a none working <b-link>, it links to a modal from the previous or next month. This is only affecting 10% of b-links and it only happens when I load the previous or next month calendar.

I appreciate if anyone can give me a clue as to what is causing this.

1
vue.js
You don't have to share the full code, just create reproducible example with minimum code needed. You could use JSFiddle or similar service jsfiddle.net/boilerplate/vue It very difficult to help you without seeing code - unlikely anyone will spend an hour or more to write similar code. - Evgenii Malikov
There are 400 lines of code; I don't know where to begin to compact it for this question. I was hoping someone could give me a hint - maybe give me a possible clue as to why only 10% of b-links link to modals from a different month and 90% of other b-links work fine. Maybe I wrote too much text in my question. The paragraph that starts with "When the page is initially loaded ..." clearly explains about the issue that I'm having. - Bernie K.
Without seeing the code, try using keys for the links and modals. Vue tries to be thrifty and re-use components by default when it can, it doesn't always make the decision you want. A key on the component will prevent that. - Bert
Thank you so much @Bert . You solved the problem. I cannot thank you enough. I had to add unique keys to both b-links and b-modals and it solved the issue. - Bernie K.
I'm glad to hear that worked out! - Bert

1 Answers

1
votes

@Bert had the correct answer and solved the puzzle. I used unique keys for all b-links and b-modals, and everything started working as it should.