What is the best way to send an array to a modal?

Question

What is the best way to send an array to a modal?

Utilizing Axios for retrieving a list of countries from a REST API, I have implemented modals with each displaying the name and flag of a country.

Upon clicking on any country name, the console will log the selected country.

I am looking to pass the last 5 clicked countries to a history modal.

<!-- History Modal -->
<div>
  <b-button v-b-modal.modal-1>View History</b-button>
  <b-modal id="modal-1" title="History">
    <p class="my-4">{{ country.name }}</p>
  </b-modal>
</div>

Below is the script for logging clicks:

handleClick(country) {
  console.log("Clicked on: " + country.name);
},

Click here for the complete script

javascript vue.js

Answer 1

Answer №1

To keep track of the last 5 countries clicked, you can implement a circular buffer within the handleClick() function. Simply pass the country that was clicked into the buffer for easy access to the history array.

data(){
 return{
   index: 0,
   history: [],
 }
},
methods:{
  handleClick(data){
   console.log("Clicked on: " + data.name);
   this.history[this.index] = data;
   this.index = (this.index + 1) % 5;
  }
}

Answer 2

To keep track of the last 5 countries clicked, you can implement a circular buffer within the handleClick() function. Simply pass the country that was clicked into the buffer for easy access to the history array.

data(){
 return{
   index: 0,
   history: [],
 }
},
methods:{
  handleClick(data){
   console.log("Clicked on: " + data.name);
   this.history[this.index] = data;
   this.index = (this.index + 1) % 5;
  }
}

What is the best way to send an array to a modal?

Answer №1

Similar questions

JavaScript encounters difficulty in reading the text file

Updating content with jQuery based on radio button selection

Creating a modal form with jQuery in ASP.NET

How to trigger a horizontal scroll on load for a specific ID in HTMLDivElement

Modify the conditions of a CSS file in Bootstrap using JavaScript

Should you consider using the Singleton pattern in Node.js applications?

A step-by-step guide to showing images in React using a JSON URL array

"Encountering a 403 error while using the request method in Node.js

Sticky box fails to maintain position as header scrolls

Automate your functions using Javascript!

File rendering issues in Vue Js when website goes live

It appears that using "object[prop]" as a name attribute does not function properly in HTML

Watch for changes in a nested collection in Angular using $scope.$watch

What is the most effective method to arrange absolute divs generated randomly in a grid-like formation?

Sending chosen choice to controller method

PHP and AJAX concurrent session issue causing difficulties specifically in Chrome browser

Is Jquery compatible with your Wordpress theme?

I am looking to retrieve the body's background color using Regular Expressions

Retrieve element attributes and context inside a function invoked by an Angular directive

Learn how to combine pie and bar charts using Highcharts. Discover how to efficiently load JSON data and understand the different ways