How do I log the country's name whenever it's clicked?

Viewed 58

I'm using VueJS, REST API, axios to get the list of countries and display them in cards on the page. I need to make a history list of the last 5 countries clicked but I'm not sure how to approach this.

Logging all the countries on the page works but I need to log the specific country that is clicked.

Here's the code for the component

<strong class="card-text" v-on:click="handleClick">{{
          country.name
        }}</strong>
        handleClick() {
      //console.log("[response]", JSON.stringify(this.countries));
    },
2 Answers

Do you mean that you want to know how to pass information about which country was clicked to handleClick?

Something like this maybe?

<strong class="card-text" v-on:click="handleClick(country)">
    {{ country.name }}
</strong>

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

You need to set a array to save the clicked country data

<strong class="card-text" v-for="country in counties" @click="handleClick(country)">
    {{ country.name }}
</strong>

handleClick(country) {
    this.array.push(country)
    this.array.slice(0, 5)
},
Related