Dealing with adding up optional values from v-model in Vue.js can be a challenging task

Within this function, I need to display the remaining amount.

 remainingAmount: function() {
            return parseFloat(this.sumAmount) - (parseFloat(this.cash) + parseFloat(this.kNet) + parseFloat(this.kNetOnline));
        }

The three parameters cash, kNet, and kNetOnline come from v-model. If any of them are null, the result will be NaN! How can I make these v-model inputs optional in this function?

Answer №1

After searching extensively, I couldn't find any optional function in JavaScript, so I had to tackle the issue using conditions:

var x = this.money ? parseFloat(this.money) : 0;
var y = this.onlineBanking ? parseFloat(this.onlineBanking) : 0;
var z = this.bankTransfer ? parseFloat(this.bankTransfer) : 0;

I have a feeling that this solution may not be efficient for handling large amounts of data.

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

Importing a JavaScript file into another JavaScript file as text in React Native can be a convenient way

In my project, I have a file named MyFirstPage.js that contains the following code snippet: renderCards() { let icon = this.state.icon; .... .... .... } This code is responsible for rendering cards within the main render function. However, as the ...

Is there a way to access the Express parameters within my React component?

Currently, I am in the process of developing a React application that utilizes Express as its back-end infrastructure My express route is configured as follows app.get('/manage/:id', (req, res) => { // redirect to react application }); ...

Displaying an iframe on an AR marker with the help of CSS3DRenderer and jsartoolkit

I am trying to achieve an interesting effect by overlaying a html iframe on top of an augmented reality marker. However, I seem to be facing some issues with the CSS3DRenderer not producing the same result as the WebGLRenderer and I'm struggling to pi ...

Failed request using Ajax

I've been trying to call a C# function using ajax, but for some reason it's not working. Here is the ajax call I'm making: $('#button1 button').click(function () { var username = "username_declared"; var firstname = "firs ...

The .val() and focus() methods are not functioning correctly

I am having an issue with a simple script: when I input a link to an image in the form's INPUT field, it should automatically display a preview of the image: https://example.com/image.jpg However, when I input the same link not by using ctrl+C/ctr ...

Tips for detecting parallel processes using Node/JS programming language

Many software packages claim to execute their methods in parallel, such as the async npm package. They assert that even for functions like concat, they are processed concurrently. How can we verify if their assertion holds true? I have written code to te ...

The jQuery autocomplete feature presents all choices regardless of what is typed into the input field

I'm currently working on a jQuery script that retrieves a JSON response and creates individual "player" objects based on the data received. These player objects are then added to the availablePlayers array, which serves as the data source for the aut ...

Leveraging an array to store data within highcharts

When I input the data directly in high charts, it works perfectly: $(function () { $('#container').highcharts({ title: { text: 'Monthly Average Temperature', x: -20 //center }, subtit ...

Looking to create a format for displaying short comic strips in a grid pattern

I am struggling to create an image grid for my small comics. I want to have 2 columns and 3 rows, but all the divs end up in the same place. I tried using display: flex, but it didn't work as expected. Additionally, I want the grid to be responsive, b ...

React Hook is failing to trigger an update

Learning React and JavaScript has been quite a challenge for me, especially when it comes to understanding React Hooks and the issue of them not updating sometimes. I have tried searching online but either end up with solutions for class-based components o ...

Transfer an HTML file object between two <input type="file"> elements

I am looking to integrate a multi-file uploader into a form that allows users to prioritize the files they upload using draggable and sortable jQuery tools. One way I have added a multi-file input is: <input type = "file" multiple> When I select m ...

Shifting Data between JavaScript and PHP

At the moment, I am trying to transfer a variable from JavaScript to PHP. This variable is being utilized for Stripe payment processing. I believe AJAX might be necessary for this task? function _goAheadWithCustomerId(c) { console.log('Customer I ...

Displaying a MySQL blob image in an HTML file with Vue.js: A step-by-step guide

Here is a Vue file that I have: export default { data(){ return{ info: { name: '', image: '', }, errors: [] } }, created: function(){ thi ...

Are you in the business of building JavaScript hubs?

I have a unique setup where my express server is in charge of handling all routing and session functionalities. I've envisioned a system where logged-in users can connect to distinct "hubs" based on the location of each hub. My idea was to treat each ...

How can the values from the scale [-60, -30, -10, 0, 3, 6, 10] be converted to a decimal range of 0-1 through

Thank you for helping me with so many of my issues. <3 I'm certain that someone has already solved this, but I'm unsure of the specific mathematical term (I've attempted reverse interpolation and others, but with no luck) so I am present ...

The pages are constantly showing an error message that reads, "There is a problem with the SQL syntax in your code."

I am having trouble with my login page as it is displaying an error on my index.php file. Below is the code snippet from my index.php: <?php include('supsrwk_epenyenggaraan.php'); ?> <?php if (!function_exists("GetSQLValueString")) { f ...

Utilizing Angular's ngShow and ngHide directives to hide spinner when no data is retrieved

I'm having an issue with the HTML code below. It currently displays a spinner until a list of tags is loaded for an application. However, the spinner continues even if no events exist. I want to make the spinner disappear and show either a blank inpu ...

Is it feasible to develop a functional computer interface using threejs?

Is it feasible to integrate a window into threejs that could facilitate the use of standard desktop applications (such as code editors) within the virtual scene? Please note: This is being implemented within a custom application or a node-webkit environme ...

Aggregate values through an onclick event using a get request and iterate through each using

I am struggling to accumulate values obtained from a json get request using jQuery. The problem is that the values keep getting replaced instead of being added up in the variable total. Can someone please guide me on how to properly sum up the values with ...

Panel floating with Bootstrap framework

I have created a unique two-column layout using Bootstrap, utilizing the col-md-6 class. The layout consists of a row with a panel at the top containing a table, a left column panel displaying a list of media items, and a right column panel containing text ...