Pass information from Vue JS v-for to a button when it is clicked

Just started learning Vue JS and encountered a small issue

I'm currently looping through an array with a button inside the div I'm iterating over

The goal is to grab the data of the selected item after clicking on the button

For example, suppose I have an array like this numbers: [1,2,3,4,5] and I'm looping through it in this manner

<div v-for="number in numbers">
    <p>{{ number }}</p>
    <button v-on:click="getTheSelectedOne"> Get The Value </button>
</div>

I attempted the following

<button v-on:click="getTheValueOfTheSelectedOne(number)"> Get The Value </button>

but encountered an error. How can I achieve the desired outcome?

Answer №1

<div v-for="(num, i) in numbers" :key="i">

Instead of:

<button v-on:click="getTheSelectedOne"> Get The Value </button>

Use:

<button v-on:click="getTheSelectedOne(num)"> Get The Value </button>

Remember to define the method:

methods: {
  getTheSelectedOne (num) {
    // num will be the selected number
    console.log(num)
  }
}

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

Issue with Vue filters not being resolved if the file is located outside of the project root

When I attempt to import a filters file from outside of the project directory using import Vue; Vue.filter(...), I encounter the error message Failed to resolve filter. If I duplicate the file and place it within the app's folder, the filter function ...

Changing Array into a JSON Document

I have been utilizing JSONKit to transform the data stored in my .json file into an NSMutableArray. I am now looking for a way to revert this array back to JSON data and save it back to the file. Are there alternative Kits or methods that could achieve t ...

Retrieve data using ajax within an mvc framework

I am facing an issue where I am unable to receive the data sent with AJAX jQuery to a .NET server as a parameter, modify it in memory, and then convert it to JSON. Any assistance in resolving this problem would be greatly appreciated. JAVASCRIPT document ...

Does the AJAX load more feature duplicate the existing data?

I've successfully implemented a PHP code that generates JSON data from WordPress posts in the database. By using AJAX, I'm able to load this JSON on my HTML page without any issues. Now, I want to enhance this functionality by adding a "Load Mo ...

Select a random index and modify it until all unique options have been exhausted, then restart the process

My image gallery has 6 slots for images, and I have an array with a certain number of image objects: "src" : { "1x" : "/clients/Logo-1.png", "2x" : "/clients/<a href="/cdn-cg ...

Revamp the Like Feature

Currently, I'm utilizing Lumen, Vuejs, and Axios for a project. In this setup, signed-in users have the ability to post content, while others can like and comment on those posts. My main goal is to visibly indicate when someone has liked a particular ...

Angular 13's APP_INITIALIZER doesn't wait as expected

Recently, I have been in the process of upgrading from okta/okta-angular version 3.x to 5.x and encountered an unexpected bug. Upon startup of the application, we utilized APP_INITIALIZER to trigger appInitializerFactory(configService: ConfigService), whi ...

What is the best way to conceal an element by clicking anywhere other than on the element itself?

Currently, I am utilizing jQuery's toggle method to display or hide a page element when another specific page element is clicked. jQuery('a#mobile-search-icon).click(function(){ jQuery('#searchBox').toggle('slow'); }); ...

Is it possible to make any object reactive within Vuex?

Seeking ways to enhance the sorting of normalized objects based on a relationship. Imagine having an application that requires organizing data in a Vuex store containing multiple normalized objects, like this: state: { worms: { 3: { id: 3, na ...

Passing slots to child components within a VueJS application - A helpful guide

Within my application, I frequently utilize a list and list_item component. To provide a general idea: contact_list.vue <template lang="pug"> .table .table-header.table-row .table-col Contact .table-col Info .tabl ...

Updating a secondary state array is possible by modifying a JavaScript array with setState()

In my React application, there is a grid where names can be selected. When a name is chosen, the app retrieves corresponding data from a database and displays rows of information related to that particular name. Each row is represented as an object stored ...

Issue with React: Children's state is altering the state of the parent component

Question : Why is it possible for a child component to change the state of its parent when each component has its own state? Below is the complete code for my app: import React, { Component } from 'react'; import { render } from 'react-do ...

The loading GIF in jQuery is malfunctioning when displayed simultaneously on multiple div elements

I am currently working on my Laravel dashboard's blade to showcase various statistics. These stats will be updated whenever the date picker is changed. Below is the code for my date picker: <div class="row"> <div class=&qu ...

Guide to switching content within a DIV when the up and down buttons are pressed using JavaScript and jQuery

I have a functional code with a timeline where each event is connected to the other. There are buttons to delete and copy data, but I want to implement functionality for swapping elements when the up or down button is clicked. I have provided a sample code ...

Verify and send form without reloading the page

I am currently facing an issue with jQuery validation and ajax form processing. My goal is to prevent a page refresh by using ajax, but I am struggling to determine the appropriate placement for the ajax code within the validation function in order to ensu ...

Getting a specific element from an Ajax response may involve using JavaScript methods to target the desired

Within my PHP file, there are multiple HTML elements that I am fetching in an AJAX response. Currently, all these HTML elements are being returned in my drop area. How can I adjust the code to only retrieve a specific element, such as an image, like so: P ...

Selenium and AngularJS patiently wait before carrying out specific actions

I have been using selenium to test an AngularJS application and I am encountering an issue where I am unable to perform any actions on the page until it is fully loaded. Although I have considered using Thread.sleep(), I am aware that this is not the most ...

"The controller's $scope isn't being updated within the DIV following a routing change

My website contains ng-view partials that change based on routing updates in $routeProvider. anmSite.config(function($routeProvider, $locationProvider){ $locationProvider.html5Mode(true); $routeProvider //Home page route .when("/", { temp ...

What led to the decision for the two distinct chart elements to merge into a single container?

In the process of creating a dashboard using React.js and d3.js, I encountered an interesting issue that perplexed me for quite some time. Below is the Scatterplot.js code written in d3.js: import React, { Component } from "react" import * as d3 from "d3 ...

I encountered an error while trying to load the resource from http://premieroptie.nl/wp-content/themes/theme51771/favicon.ico: net::ERR_NAME_NOT_RESOLVED

Upon opening my website URL, computertechnet.nl, I noticed an error when inspecting and checking the console tab. The specific error message is: Failed to load resource: net::ERR_NAME_NOT_RESOLVED for . In addition, a second warning was displayed: G ...