Using Parseint in a Vue.js method

For instance, let's say this.last is 5 and this.current is 60. I want the sum of this.last + this.current to be 65, not 605. I attempted using

parseInt(this.last + this.current)
but it did not work as expected.

<button class="plus" @click="plus">+</button>
<input class="res" v-model="current" maxlength="24" disabled>
<input class="res2" v-model="last" maxlength="24" disabled>
button{
width:200px;
height:200px;
}
data:{
  last: null,
  current: " ",
  plusClicked: false
}
methods:{
  plus:function(){
   this.last = this.current;
   this.current = " ";
   this.plusClicked = true;
  },
equal:function(){
  if(this.plusClicked == true){
   alert(parseInt(this.last + this.current));
   this.plusClicked = !true;
  }
}},

Answer №1

To start off, it is recommended not to set this.current as " ", but rather as 0.

Another important step is to adjust the input field type to <input type="number">.

In order to sum up both numbers, you can use:

  • parseInt(this.last) + parseInt(this.current)

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

Mean Stack involves the interaction between the client controller and the server controller using routes to communicate and call server methods

I am currently developing a mean stack application and encountering difficulties when attempting to send requests to the Express/Node server in order to delete an element from an array in Mongo. Below is my schema for reference: var DeckSchema = new Schem ...

I am looking to implement a straightforward drag-and-drop feature using jQuery

Is it possible to drag and select 4 buttons in a browser, similar to how you would do on Windows, using jQuery locally? ...

Releasing the mouse button after dragging successfully without the use of any libraries

I have implemented a pure CSS snap scroll feature and now I need to determine the position of an element in relation to the viewport once the user stops dragging. However, I prefer not to rely on any complex libraries as I do not require any actual movemen ...

The Correct Way to Implement Google ReCaptcha

I've developed a PHP contact form that performs validation using AJAX/JSON on the server side. The errors are then passed to Javascript for display and adjustments to the HTML/CSS. My challenge now is to integrate Google ReCaptcha with AJAX validatio ...

begin VueJS fetching data

I'm having trouble retrieving and using data. I am fetching data using axios and printing it with console.log. Here's what I see in the console: Even though I can view my data and its length, I'm struggling to utilize them in my code. For e ...

What is the best way to implement form fields that have varying validation patterns based on different conditions?

Currently, my focus is on developing a form that prompts the user to choose between "USA" or "International" via radio buttons. The input field for telephone numbers should then adapt its requirements based on the selected country - either a 10-digit US nu ...

Executing a function while adjusting a range slider

Having an <input type="range"> element on my website presents a particular challenge. To handle changes in this element, I am using the following function: $("#selector").bind("change", function() { //perform desire ...

Leveraging @click within dropdown selections - Vue.js 2

Is there a way to implement the @click event in select options? Currently, I have the following: <button @click="sortBy('name')">sort by name</button> <button @click="sortBy('price')">sort by price</button> Th ...

What is the best way to end a table row after every group of four items?

I am working with a Handlebars template to display an array of movies in a table with four columns. Currently, I have set up a HBS helper in my code: app.engine('handlebars',exphbs({ defaultLayout: 'main', helpers: { n ...

Tips for creating a cohesive group of HTML elements within an editable area

Imagine having a contenteditable area with some existing content: <div contenteditable="true"> <p>first paragraph</p> <p> <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-s ...

Reiterate list of inquiries using InquirerJS

How can the questions be reset or have a specific answer lead to another previous question? var questions = [{ { name: 'morefood', message: 'Do you want more food?', ...

Running a Vue.js application on a hosting platform

I am currently facing an issue with my Vue.js application. I have set up a domain and subdomain for the application and now I want to host it. However, when I try to add the subdomain name, I keep encountering 500 Internal server errors. This is my first t ...

How to Transform JSON Element into a JavaScript Array in AngularJS?

Implementing AngularJS to fetch values in JSON format using $resource call. The model element I require is a Javascript array structured as: [ [1328983200000, 40], [1328983200000, 33], [1328983200000, 25], [1328983200000, 54], [1328983200000, 26], [1328 ...

Troubleshooting Vue and Typescript: Understanding why my computed property is not refreshing the view

I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial pri ...

How can I implement user-specific changes using Flask?

I am a beginner with Flask and I am working on a project where users can sign up, and if the admin clicks a button next to their name, the user's homepage will change. Below is the Flask code snippet: from flask import Flask, redirect, url_for, render ...

What is the best way to change the value of an array within a ref in Vue 3?

Currently, I am in the process of developing a Vue.js application. Within my code, there is a reference variable that holds an array. My goal is to update a specific value within this array. export default defineComponent({ setup() { const allQues ...

Guide on dynamically importing a module in Next.js from the current file

I am facing a challenge where I have multiple modules of styled components in a file that I need to import dynamically into another file. I recently discovered the method for importing a module, which requires the following code: const Heading = dynamic( ...

The hosting service Heroku is currently having trouble recognizing the concurrent command within the "npm run start" script

This is an inquiry posted on Stack Overflow: My hosting provider, Heroku, does not seem to recognize the "concurrently" command in my "npm run start" script. I can successfully run this command locally using "heroku local web" but encounter log errors whe ...

Child component destruction triggers an ongoing digestion process

I am facing a strange issue within my AngularJS application. The error I'm encountering is the common $digest already in process error. Despite searching online and reviewing similar questions, none of the proposed solutions have resolved the issue. T ...

Laravel Mix causing issues with Vue loading when extract() is used

I currently have a simple webpack.mix.js and resources/js/app.js setup in my Laravel project. Here is the code from webpack.mix.js: const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass(&ap ...