The data sent within an event does not trigger reactivity

Not producing errors, just failing to function. The addition of this also has no impact.


input( type="number" v-model="myData" @wheel="wheelIt($event, myData, myMethod)" )

...

methods:
{
    wheelIt ( event, data, func )
    {
        if ( event.deltaY < 0 )
        {
            data += 1
            func()
            event.preventDefault()
        }
        if ( event.deltaY > 0 )
        {
            data -= 1
            func()
            event.preventDefault()
        }
    },

The hardcoded wheel event functions properly, but it is necessary to parameterize it.

Answer №1

The solution lies in not incrementing inside the function, but rather directly in the event.

@wheel="wheelIt($event, myData += 1, myMethod)"

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

How can I integrate live data from a MySQL database to automatically update tables on a website?

I have developed a basic application using C# and .NET, with MVC architecture and a MySQL database linked to my server. I have utilized ADO.NET database models to automatically generate static data in my views from the models saved in the database, with ...

Place a list with scrolling and overflow features side by side

Having trouble getting my headers to scroll with overflow auto and white-space nowrap. Can't figure out why it's not working. I want to create hyperlinks within headers to link to specific parts of the website. I have the code for hyperlinking s ...

How about "Temporary and localized responses with Discord.JS?"

Recently, I've been diving into the world of localization on my Discord Bot and had a thought. Localization allows you to tailor replies in different languages based on the user's language settings. For example, take a look at this code snippet ...

Encountering a Firebase error: createUser failed due to missing "password" key in the first argument in AngularJS

Recently, I started learning Angular and decided to follow an online tutorial on creating a chat application. However, I encountered an issue when trying to register with an email and password - the error message "Firebase.createUser failed: First argument ...

Is there a way to nest arrays within arrays in JavaScript?

Array ( [0] => Array ( [contactId] => 5 [companyId] => 54 [personName] => Awais [contactNo] => 0321-1111111 [contactType] => Partner ) ) data[0].personName I ...

Creating a unique AngularJS custom directive that utilizes ng-options can be achieved by populating

I've encountered a major roadblock in my project, and despite my efforts to troubleshoot, I can't seem to find the solution. The issue revolves around populating options within an ng-options directive through a service. This directive is nested i ...

Updating Element Value in Python Using JS and Selenium

Hello, everyone. I'm new to coding and seeking some help regarding a problem I encountered with using 2captcha for my Python web scraping automation. Upon running the script, I receive the captcha token from 2captcha as instructed in their API documen ...

A pale tooltip with a light arrow appearing against a soft white backdrop

Can someone help me figure out how to display a white tooltip with a white arrow? I've tried to implement it using the code below, but the white color is not visible against the background. Any suggestions on making it stand out? https://i.sstatic.ne ...

What sets apart `npm install --save-dev gulp-uglify` from `npm install gulp-uglify`?

I'm feeling perplexed regarding the npm installation process. Based on what I've gathered, there are several options available to me when installing modules: The -g option which saves modules globally --save-dev No arguments. Could someone cl ...

Issue with Vue js version 2.6.13: Components failing to render

Recently updated vue js from version 2.6.12 to 2.6.13 and encountered an issue where some components are not rendering without any warning or error message in the console. Interestingly, when reverting back to version 2.6.12, the components render successf ...

Combining CSR and SSR in the next iteration of our project will

In my application, I have three main user roles: Consumer, Merchant, and Admin. I want the pages that Consumers access to be SEO friendly and server rendered. However, for Merchants and Admins, I prefer them to be client rendered with their own respective ...

no such file exists in the directory

My current project involves connecting a javascript file to an html file using the <script> tag. However, upon rendering the html page, I encountered an error in the console indicating that the javascript file could not be located. Here is the struc ...

Maintain the persistence of cookies when the Vue single page application is reloaded

I have created a basic single-page application with a Vue frontend and Python API using Flask. Currently, all configurations are set up on my local machine (the API can be accessed at localhost:5000 and the Vue SPA at localhost:8080). I am utilizing flask- ...

Utilizing Angular: Filtering Views Based on JSON Data Values

I am struggling to figure out why a basic Angular filter is not working for me in this example. Despite following the recommended format I found online, it does not seem to be functioning properly. Essentially, I just need to display information from the a ...

Error occurs in Query component when using a higher order component (HOC) due to element type

I've developed a custom higher-order component called withInfiniteScroll, designed to enable infinite scrolling functionality for a basic list of data. My aim is to integrate this HOC within Apollo's Query component, but I'm encountering an ...

Issue with Apollo Client - Mutation failing due to undefined property 'data'

When attempting to call a mutation on the client side in Next.js, I encounter an error every time I use the useMutation hook or the client itself, resulting in the following error: Cannot read property 'data' of undefined. See the code snippets b ...

AmCharts Axis renderer mistakenly renders an additional grid line

I have successfully created a basic XYChart using amcharts4. To get rid of the grid lines on the x-axis, I changed the stroke opacity for the x-axis grid to 0 using the following code: xAxis.renderer.grid.template.strokeOpacity = 0; Everything was workin ...

Troubleshooting the failure of the fetch function in my React application

Currently, I am delving into full-stack development with a focus on Js, React, and Express coupled with a Postgres database. The server is configured to run on localhost:5003, and the backend app.js file contains the following code: const express = require ...

Vue parent Component refreshes child Component data when props are updated

One of the challenges I am facing is with a child component that has internal data which should not be changed from outside. However, whenever I update the prop from the parent component, this internal data gets reset. For example, in the code snippet bel ...

What is the best way to increment the value of an input by any number using JavaScript and HTML?

My code is causing a NaN error, and I'm struggling to identify the root cause. Even providing a specific number in the addnum function did not resolve the issue. <script> var result = document.getElementById("result"); var inputVal = ...