How can I track and log the name of the country each time it is selected by a click?

I'm currently utilizing VueJS along with a REST API and axios to retrieve the list of countries, then showcasing them in card format on the webpage. However, I am facing a challenge in creating a history list that captures the last 5 countries clicked by the user.

Although I have successfully logged all the countries displayed on the page, the issue lies in logging the specific country that is clicked by the user.

You can find the component code here

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

        handleClick() {
      //console.log("[response]", JSON.stringify(this.countries));
    },
javascriptvue.js

Answer №1

Are you looking to pass information regarding the clicked country to the function handleClick?

Could it be something along these lines?

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

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

Answer №2

To properly store the data of the selected country, create an array variable.

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a for loop in JavaScript to dynamically display TextBoxFor(model=> model[i].prop) in an MVC application

I need some help getting this code to function correctly: $('#ddl').change(function () { $('#cont').html(''); var count = getCount($('#ddl').val()) for (var i = 0; i < count ; ...

c#javascriptjqueryasp.net-mvc-4razor

The React render function fails to display the components it is supposed to render

Upon running npm start, the browser opens localhost:3000 but only displays a white page. To troubleshoot, I added a paragraph within the <body> tag in index.html. Surprisingly, the text Hello World! appeared for less than a second before disappearing ...

javascriptreactjs

Having trouble toggling classes with mouseup in Wordpress Underscores theme

While I'm utilizing Underscores as the foundation theme for my website, one aspect that I particularly appreciate is its incorporation of a functional mobile navigation component. However, since my site is essentially single-page, the navigation remai ...

javascriptphpjquerywordpressunderscores-wp

Establish a connection to an SSH server using Node.js code, specifying the SSH key and server hostname for

Having VPN access allows me to SSH into the server using the following command in the terminal: ssh qa-trinath01.my-qa This command works perfectly fine when executed from the terminal. However, when attempting to connect via Node.js, I encounter issues ...

javascriptnode.jsnpmsshdevops

Switching from a right arrow to a down arrow using jQuery for a collapsible accordion feature

I have developed a unique type of toggle feature similar to an accordion design. When I click on the right-arrow next to an item, such as Area A, it expands to reveal the list of items within Area A. The arrow also changes orientation to point downwards (L ...

javascriptjqueryangularjs

Tips for designing a Quasar page that dynamically loads content as the user scrolls

I am attempting to develop a component that will render multiple elements as the page is scrolled. I am utilizing the Quasar framework for Vue.js. Below is the code required to render a single block containing information from a JSON file: Quasar comes wi ...

javascriptvue.jsquasar

Ways to connect a button to a Bootstrap 5 tab class

I am trying to find a way to directly link to a specific tab using a Bootstrap 5 button class. I have attempted to incorporate the solution provided in the following resource: Twitter Bootstrap 5 Tabs: Go to Specific Tab on Page Reload or Hyperlink Unfo ...

javascriptjquerybootstrap-5

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

javascriptjqueryhtmlcss

Exploring the possibilities of working with deeply nested components in React recursively

I have a basic to-do list with functionality for adding todos, toggling completion status, and deleting todos. My goal is to have the ability to nest todos infinitely. I've been able to display nested todos through recursion, but I'm struggling t ...

javascriptreactjsrecursionnested

ng-select search functionality failing to display any matches

Currently, I am encountering an issue with the ng-select functionality in my Angular CLI version 11.2.8 project. Despite using ng-select version 7.3 and ensuring compatibility with the Angular CLI version, the search functionality within the select eleme ...

javascriptangularangularjstypescript

Assigning properties to the constructor using `this.prop`

Within a React class component, I have multiple methods and the component receives various props. I am contemplating whether I should assign each prop as this.propName in the constructor and then access them using this.propName. For your reference, below ...

javascriptreactjs

Shuffle the contents of various div elements, conceal one, reveal another

I am currently working with a menu that uses the loadContent function to load pages into the #main div. This allows me to change the content of the page while keeping the menu intact. <ul> <li class="page1" onclick="loadContent('page1.php ...

javascriptajaxjqueryjquery-animate

Challenge with dynamic parent routes

In my React application, different routes are loaded through various parent URLs. For example: {["/sat/", "/act/", "/gre/", "/gmat/", "/toefl/"].map((path) => ( <Route key={path} path={path ...

javascriptreactjsreact-router-dom

Receiving a "Maximum call exceeded" error when using Vue.js router guards for the beforeEach hook

As I work on my Firebase-VueJS app, I am implementing basic security rules with router guards. In my main.js file, I have added the following code to handle permissions based on the user's authentication status. However, I encounter an error 'vue ...

javascriptvue.jsvuexrouter

Preserving alterations to media files using an image cropper

I've created a special controller for an image cropping tool that pops up over a media item in the content section. Right now I can manipulate the crops in the overlay, but when I click "Save Crops", the changes don't stick. However, if I use the ...

javascriptangularjsumbraco

Customize the duration of Skeleton animations in Material UI

The <Skeleton> components in mui utilize pulse or wavy animations. Wondering if there's a method to quicken this animation, perhaps by adjusting the duration? ...

javascriptcssreactjsmaterial-ui

Retrieve information from api and showcase it in html

Recently, I came across an interesting API file that caught my attention: My goal is to extract information from this API and present it on a HTML page in a visually appealing format. Despite scouring various forums, I have yet to find a solution that fi ...

javascripthtmljson

What might be causing the attribute of this Backbone model to be undefined when attempting to access it?

I have a straightforward REST API that provides information about an item at /api/items/:id, which includes the ID and name. I am using a Router to organize my Backbone views. The edit route creates a FormEditItem view, passing the ID from the URL. To ret ...

javascriptrestbackbone.jsbackbone-viewsbackbone-model

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

javascriptjqueryhtmlcss

The Material UI Rating Component is malfunctioning and showing an incorrect value

I'm currently working on a component loop that takes in async data. Everything is rendering properly except for the first component, where the Rating component isn't displaying its value correctly (it just shows 0 stars). Here's the code: & ...

javascriptreactjsmaterial-ui