Mastering various mathematical operations in Vue.js

I am attempting to calculate the percentage of a value and then add it back to the original value using Vue.js. Here is an example: 5 / 100 * 900 + 900 = 945.00 (standard calculation)

5 / 100 * 900 + 900 = 90045 (Vue.js calculation)

This is the code I have written:

<td>
  <input name="amount[]" v-model="row.amount" style="width: 94px;" type="text">
</td>
<td>
  <select name="vat[]" v-model="row.vat" style="width: 94px;" class="form-control">
    <option value="0" selected>0%</option>
    <option value="5">5 %</option>
  </select>

</td>
<td>
  <input type="hidden" :value="row.vat / 100 * row.amount" v-model="gross_am">
  <input value="" name="gross[]" :value="row.amount + gross_am" v-model="row.gross | currencyDisplay" style="width: 94px;"
    type="text">
</td>

The purpose is to calculate the gross amount based on the user-entered amount and selected vat value, triggering the arithmetic operation where the vat percentage is added to the original amount to get the gross amount. Thank you. (I am still learning Vue.js)

Answer №1

The reason behind this issue is that the variables row.amount and gross_am are both treated as strings. When using the + operator with strings, it concatenates them together instead of performing arithmetic addition. In your scenario, "900" and "45" are being concatenated to form "90045". To fix this problem, you need to manually convert these string values to integers.

<input value="" name="gross[]" :value="parseInt(row.amount) + parseInt(gross_am)" v-model="row.gross | currencyDisplay" style="width: 94px;" type="text">

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

I'm perplexed by setting up Node.js in order to work with Angular.js

Currently following the Angular tutorial provided at https://docs.angularjs.org/tutorial, but I'm encountering confusion with the Node.js installation. Having already installed node globally on my Mac, the tutorial mentions: The tutorial instructio ...

What can I do to prevent masonry images from piling on top of one another?

I have been working on creating a photo gallery using the Bootstrap 5 example on masonry, and everything is working well so far. I have also successfully implemented modal boxes. However, the only issue I'm facing is with the JS Image Loaded not preve ...

Trouble installing NPM packages from Artifactory on Windows 10

Problem Description: I am utilizing Artifactory for my NPM packages. When attempting to install them on "Windows - 7", everything is functioning correctly. However, on "Windows - 10" an error is being displayed and the packages are not installing. Error M ...

Persist the scroll position within a div even after refreshing a PHP file using AJAX

I have a specific div set up with its own scroll bar, which is being refreshed using AJAX (with a PHP file). Whenever I scroll within this div and trigger a reload, the inner scrollbar resets back to the top. My goal is to retain the position of the scroll ...

Problem with single-table layout in DynamoDB and constraints on query parameters

I'm trying to limit the elements I fetch in each query, but encountered an issue: Using the single-table design in DynamoDB, I am only getting four items. If I check the first 10 elements in DynamoDB, I always get a count, regardless of my filtering ...

The JSON GET method displays HTML content when accessed through code or console, but presents a JSON object when accessed through a web address

I am currently trying to execute the following code: $(document).ready(function () { $.ajax({ url: 'http://foodfetch.us/OrderApi/locations', type: 'GET', success: function(data){ alert(data); ...

Formatting dates in the Bootstrap Date Picker within Angular 6

When using Angular 6, I incorporate a date picker by adding the bsDaterangepicker class for selecting a date range. <input type="text" (ngModelChange)="dateFilterChanged($event)" [(ngModel)]="myDateField" value="{{ myDateField | date:'yyyy-MM-dd&a ...

the `req.body` method fetches an object with a property named `json

Having an issue with accessing data from req.body in my form created with JS { 'object Object': '' } //when using JSON.stringify: { '{"A":"a","B":"b","C":"c"}': &apo ...

Implementing jQuery's live() method to handle the image onload event: a guide

Looking to execute a piece of code once an image has finished loading? Want to achieve this in a non-intrusive manner, without inline scripting? Specifically interested in using jQuery's live() function for dynamically loaded images. I've attemp ...

Tips for preventing the use of nested functions while working with AJAX?

Consecutively making asynchronous calls can be messy. Is there a cleaner alternative? The issue with the current approach is its lack of clarity: ajaxOne(function() { // do something ajaxTwo(function() { // do something ajaxThree() }); }); ...

Is there a way to determine the percentage between two specified dates?

If I have a specified start and end date, I am interested in knowing the progress percentage achieved from the start date up to the current date compared to the end date. To put it simply: I would like to determine how far along I am towards the end date i ...

Utilizing EventEmitters for cascading operations in Angular 2 dropdown menus

I have a form with several cascading drop-downs - the selection in one drop-down determines the options available in the next. Each drop-down retrieves its values from an async data service, and Angular EventEmitter is used to handle events and populate su ...

Selecting elements dynamically with JQuery

Trying to use a jQuery selector within plugin code created by a 3rd party has proved difficult. When hardcoded, it works fine; however, when attempting to use variables for dynamic selection, the object cannot be found. The lack of id handles in the CSS c ...

Tips for avoiding unintended single clicks while double clicking in React

How can I make a function trigger on both single click and double click events when working with a video element in React? Currently, the single click function is also being called when double clicking. I am seeking a solution to this issue. Below is the ...

Avoiding cross-site scripting vulnerabilities, an AJAX response will return an HTML response

function accessAccount() { var errorMessage = ""; var checkedResult = true; $(".errorDisplay").hide(); var accountNumber = document.getElementById('customerAccountNumber').value; var accountType = document.getElementById(&apos ...

Guide on deactivating a button when a numerical value is detected within a field in VUE JS

I need help figuring out how to automatically disable a button when a field contains a number. Here is an example of my code: disabledSubmitButton() { return this.$v.$error || this.firstName === '' || this.lastName === '' || ...

Guide to transferring data from Laravel to Vue Router?

I am currently working on a Laravel-Vue project and I need to transfer the base URL from the Laravel view to the Vue router component. For example, passing this data: {{ url('/') }}. Can anyone advise if it is achievable to pass this information ...

Creating a jQuery Mobile Multi-Select feature with dynamically loaded data

I'm facing an issue with integrating jQuery Mobile and AngularJS. I need a multi-select option for users to choose categories, which have parent-child relationships. The data structure is fetched asynchronously from a database. The problem is that t ...

Distinguishing between `notEmpty` and `exists` in express-validator: what sets them apart

I'm confused about the distinction between exists and notEmpty in express-validator as they seem to function identically. ...

Develop a custom chat feature in HTML with the powerful VueJs framework

Currently, I've been developing a chat plugin for HTML using VueJs. My dilemma lies in creating a versatile plugin that can seamlessly integrate into any website. My ultimate goal is to design a plugin that can be easily deployed on various websites ...