Passing a variable name through a @click function in Vue3 - an easy how-to guide

I am trying to implement a button that triggers the raiseStat() function. The goal is to pass the name of an existing variable so that the function can modify that specific variable.

Here is the button:

<button @click="raiseStat(health)">Add</button>

The data containing the variable to be modified:

data(){
    return{
        health: 1,
    }
},

This is the function itself:

 methods: {
    raiseStat(statName){
      statName++
    },

},

When I console.log the variable within the function, it displays '1' as expected because only the value is being passed through, not the name.

Is there a way to reference the name of the variable instead of just its value?

Thank you

Answer №1

If you want to keep track of stats in your code, you can declare them as an object and then access the 'health' key like this:

<button @click="raiseStat('health')">Add</button>
data(){
    return{
        health: 1,
    }
},
methods: {
    raiseStat(statName){
      this[statName] += 1
},

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

Having trouble using Popper.js with Bootstrap 4 Beta in Webpack 3.x? You might encounter the error message "Popper is

Exciting news - Bootstrap 4 Beta has been released! However, Tether has been replaced with Popper.js for tooltip functionality (among other features). This change has triggered a new error in the console, prompting me to switch to Popper.js: Bootstrap drop ...

Guidelines for sending an array from a Laravel Controller through AJAX and generating a button based on the received data

Before making a selection, I click on the Color button: <form class="form form-variant"> {{ csrf_field() }} <button type="submit" class="btn btn-success che ...

Exploring the Live Search Functionality on an HTML Webpage

I am attempting to create a live search on dive elements within an HTML document. var val; $(document).ready(function() { $('#search').keyup(function() { var value = document.getElementById('search').value; val = $.trim(val ...

The feature of sorting appears to be malfunctioning within jQuery DataTables

I am having trouble implementing sorting in my data. Can you please help me understand why it is not working? What changes do I need to make so that the data can be displayed in order? <%@ page language="java" contentType="text/html; charset=ISO ...

What is the method for including a data attribute in the text of a cell using Datatables Editor?

When initializing datatables along with editor, I typically use the following code: columns: [ { data: "name", className: 'noEdit clickTextToOpenModal' }, In this line of code, I am able to set the className attribute. However, is i ...

Tips for ensuring the security of your code in node.js

Here is a snippet from my app.js that deals with managing connections: var connections = []; function removeConnection(res) { var i = connections.indexOf(res); if (i !== -1) { connections.splice(i, 1); } } I make a call to removeConn ...

Transmitting fixed information through bootstrapValidator within a local network

How can a remote back-end be used to verify if a specific username is already in use? Verify locally without relying on a database or web server. This code utilizes the latest versions of BootstrapValidator, jQuery, HTML5, and Bootstrap. <script src=" ...

Assistance required in designing a unique shape using Three.js

https://i.sstatic.net/pmHP2.png Hello there! I could use some assistance with replicating the 2D shape shown in the image above using three.js. Specifically, I'm encountering some difficulty with incorporating the subtle curvature seen on the inner l ...

Remove div blocks in a Django template when scrolling

How can I dynamically remove div blocks in django templates (queryset) as soon as they are out of the browser's field of view while scrolling? For example, delete blocks from the top when scrolling down and delete blocks from the bottom when scrolling ...

Is there a way to capture the input from the text box and store it in the local storage?

I'm confused about why the data entered into the input box is not being saved to local storage. <body> <input id="name"> <button onclick="bob()"> save </button> </body> <script> const user = document.getElementByI ...

The logo image dynamically switches as the user scrolls through various colored sections

Looking to create a feature that changes the logo image as users scroll through different colored sections. Specifically, switching between dark and light themes. a) How can we determine if the section the user is currently on has a dark or light theme? b ...

Proper date formatting in Angular Data Table

Could anyone help me with date formatting? I am facing an issue with the date format in a table within my application. The current date format is not correct and appears as shown on the screen. I would like to format it to YYYY-MM-DD only. Any suggestions ...

What is the best way to handle various sections with changing structures within a complex form using react-hook-form?

I am working on a complex form that has sections A, B, and C, each of which can be in shape A1 or A2, B1 or B2, C1, or C2. Users are required to fill out settings based on whether the section is set to "advanced" or "basic". I want users to submit the enti ...

Guide to displaying a solitary mathjax equation?

I am currently developing a webpage that MathJax is not compatible with. There are hidden display:none elements, latex text embedded within svgs, and various other challenges. Instead of relying on MathJax to automatically scan my site for equations and de ...

What is the process for retrieving the value of the 2nd td by clicking on the checkbox in the 1st td with JavaScript

When I click on "in", I am looking to retrieve the value of "out". This can be easily understood by referring to the image below: The timesheet displayed is generated using an array. All the data is stored in the array and needs to be presented in a table ...

Sending empty parameter data via Ajax to an MVC controller

Initially, I had no issues passing a single parameter to my MVC Controller through Ajax. However, when I attempted to add an extra parameter, both parameters stopped sending data to the Controller. Can anyone help with this issue? Thank you! Ajax Code: ...

Executing a C# function from JavaScript

I've been attempting to invoke a C# function from JavaScript using the following method: [WebMethod] public static boolean F1() { return true; }   <asp:Button ID="Button1" runat="server" OnClientClick="x(); return false" Text="Button" ...

Steps for adding a check mark to the chosen image

Is there a way to make a check mark ✓ appear in the upper right corner of an image when it is clicked on? The intention is for the icon to disappear when another image is selected, following the same effect that has been implemented. I have looked but h ...

Utilizing Vuex to manage the state of modal components within a list of child components

I am attempting to utilize vuex to maintain a value that controls the visibility of a modal in a child component. The parent component renders the child component multiple times in a list, but the modal consistently displays only the last item in the list. ...

Setting a dynamic variable to define the key name in Jquery Ajax data retrieval

When defining a key for 'id' in my PHP code, instead of using the value of the variable 'action_upd' (which is typically "action"), it reads the literal string 'action_upd'. For example: if($_POST['action_upd']){ e ...