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

The Oscillator node in the Web Audio API is unable to be started more than once due to an error

Every time I attempt to start, stop, and then start my oscillator again, I encounter the following error message: Uncaught InvalidStateError: Failed to execute 'start' on 'OscillatorNode': cannot call start more than once. Although usi ...

Error encountered when attempting to integrate FontAwesome into the body of a Next.js Link

I'm currently using the react-fontawesome library in my project built with Next.js. However, I've encountered an issue when trying to include an icon inside the Link component. The error message is confusing and I can't seem to figure out wh ...

What is the best way to display a default image in a kendo grid when the image field is empty?

I am trying to display a default image if the image field is empty. Below is the code for the image field: { field: "Photo", title: "Photo", template: '<img src="#= Photo ? Photo : 'default.jpg' #" alt="image" width="80px" height="80px" ...

I'm struggling to retrieve $wpdb data after using a PHP function to load my posts with AJAX

Hey there! I'm trying to create a cool feature where users can view post archives grouped by year. When they click on a specific year, all the posts from that year should be displayed. I've set up an AJAX call to my functions.php file, which con ...

Is it possible for namespaced modules to manage mutations in the root namespace?

Imagine this scenario: I have two namespaced modules: moduleA and moduleB. They both follow a similar structure: export default { namespaced: true, state: defaultState(), actions: { // ... }, mutations: { [SET_DATA] (state, data) { ...

What's the best approach for implementing TimeInput exclusively in React-Admin?

I discovered this helpful code snippet on the React-Admin documentation that allows me to input both a date and time: import { DateTimeInput } from 'react-admin'; <DateTimeInput source="published_at" /> But now I'm wonderin ...

Creating a Controlled accordion in Material-UI that mimics the functionality of a Basic accordion

I'm a Junior developer seeking assistance with my first question on this platform. Currently, I am working with a Controlled accordion in React and need the icon to change dynamically while staying open even after expanding another panel. The logic ...

Aggregating JSON results from multiple foreach iterations

I'm facing an issue with my PHP script that generates video streams as output. The output consists of multiple unique streams. My challenge is to convert the output into JSON format, but due to the presence of multiple foreach loops, I am not getting ...

Unable to transfer all the formatting from the original file for the window.print() function. Localhost is functioning properly, but encountering issues with production

I'm encountering an issue with getting all styles from my Vue app. I have tried the code provided in this answer: https://stackoverflow.com/questions/52343006/how-to-print-a-part-of-a-vue-component-without-losing-the-style While it works fine on loc ...

I could really use some assistance with the concept of "AJAX" - can anyone help

After spending several months working with AJAX, I have come to understand the typical request lifecycle: Sending parameters to a background page (PHP/ASP/HTML/TXT/XML ... what other options are available?) Performing server-side processing Receiv ...

By using Yii2, you can pass an id to the URL by simply clicking on a

I am struggling with sending the post_id from a div containing text content (retrieved from a database) to a URL in order to render a view page displaying the entire content. I am using Yii2 and believe I need to use JavaScript for this task, but I am unsu ...

Guide to organizing files with custom directory layout in NodeJS

Imagine having multiple files spread across various folders. /parentDir/ |__dirA/ |__file1 |__file2 |... |__dirB/ |__file3 |... |... You want to consolidate them into an archive, with the option of using something like ...

Is it possible to toggle all parent targets in Bootstrap?

When trying to showcase my point, I believe it is best demonstrated by visiting Bootstrap documentation at https://getbootstrap.com/docs/4.0/components/collapse/ and viewing the "multiple targets section." In this section, you will find three buttons: togg ...

unable to apply angular measurement inside quotation marks

What is the reason for this issue: <ul class="dropdown-menu"> <li ng-repeat="choice in dropDownItems"> <a class="btn" ng-click="mnuClick('{{choice}}')">{{choice}}</a> </li> </ul> However, this code wo ...

Incorporate a new item into an array within a JSON `document` using Node.js for every incoming request

I'm facing an issue with storing multiple sets of x, y coordinates in a file on the server side. Currently, when a user right clicks on an image on the frontend, the coordinates are sent to the node server via AJAX post request and saved as objects in ...

Start a Draft.js Editor that includes an unordered list feature

I am trying to pre-populate a draft.js editor with an unordered list made from an array of strings. Here is the code I have so far: const content = ContentState.createFromText(input.join('*'), '*') const editorState = EditorState.crea ...

When filtering an array in JavaScript, ensure to display a notification if no items match the criteria

In React/Next, I have an array that is being filtered and sorted before mapping through it. If nothing is found after the filters run, I want to display a simple message in JSX format. The message should be contained within a span element. Here is the str ...

Having trouble with tabs in jQuery?

I'm having trouble setting up tabs in a reservation form with 3 tabs that include text boxes for user input. I can't seem to get it working properly and I'm not sure where I've gone wrong. Could it be due to the placement of the content ...

Ways to pause JavaScript execution until a function completes its task

Is it possible to pause JavaScript execution until a specific function finishes in JavaScript/NodeJS? For instance: https://i.stack.imgur.com/Ta8pj.png Imagine the first line of code triggers an alert, and JavaScript stops executing until the user interac ...

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...