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

Encountering a "Cannot GET /PATH" error while developing a NUXT application due to a DOT present in

Is there a way to receive a JSON request in Express delete using Restangular?

Looking to learn how to replicate data effortlessly with either javascript or jquery?

Error 504 'FUNCTION_INVOCATION_TIMEOUT' encountered on NextJS/Vercel deployment

Design an interactive div element that allows users to modify its content, by placing a span

Tips for revealing a hidden div by clicking on another div?

Upon executing npm install in my Laravel project, an error message promptly appears stating: "npm WARN deprecated [email protected]: gulp-util is deprecated - replace it."

Effortless sliding panel that appears on hover and vanishes when mouse is moved away

Steps for clearing a set of checkboxes when a different checkbox is selected

Android is now asking for location permissions instead of Bluetooth permissions, which may vary depending on the version

Tips for preventing route changes when clicking on a hash tag in AngularJS

Retrieve the scrolling height in Vue.js 2 window

Utilizing a try/catch block for validating a JSON file is ineffective

Enhance a Javascript object by dynamically introducing new elements

An odd glitch occurring when transferring data from $_GET to $_SESSION

Unsuccessful attempts to animate with Jquery in Google Chrome are persisting

Task: Choose MySQL option and Retrieve JSON data

Bootstrap Table Vue Selection

Is there a way to invoke a php function in javascript with the help of Ajax?

Encounter issues with v-for functionality when using Internet Explorer 11