Issue with Vuejs/Laravel computer function bug

Trying to figure out how to calculate the Total Tax Amount after an input using Vuejs in a Laravel application. The function on my computer that is supposed to calculate the total isn't working as expected. Can anyone spot where the issue might be?

Here is the Vuejs code snippet:

var app = new Vue({
el: '#app',
data: {
rinvoices: {    
        amount:'',
        tva:'',        
},
},
 methods: {
        addRinvoice: function () {
        axios.post('/addrinvoice', this.rinvoices)
            .then(response => {
                console.log(response.data);
                if (response.data.etat) {
                    this.rinvoices = {
                         id: 0,
                          amount: response.data.etat.amount,
                           tva: response.data.etat.tva,     
                    };
                }

            })
    },
    },
computed: {
total: function () {
    var amount= this.rinvoices.amount;
    var tax= this.rinvoices.tva;
    var taxamount= amount*tax;
    var t=taxamount + amount;
    return t;
}
},
});

The problem is that my function is not calculating taxamount + amount, instead it's displaying the values separately as taxamount and Amount. For example, instead of showing 10+5=15, it shows 10 5.

Answer №1

You must convert the variables taxamount and amount from String to Number before performing addition.

Update to: var t = +taxamount + +amount;

total: function () {
   var amount= this.rinvoices.amount;
   var tax= this.rinvoices.tva;
   var taxamount= amount*tax;
   var t = +taxamount + +amount;
   return t;
}

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

The React snackbar is mysteriously peeking out from behind the popup

While using the react-notifications-component snack bar, I encountered an issue where my snack bar was appearing behind the pop-up. Is there a way to fix this with z-index? I tried using <ReactNotification style={{ zIndex: 10000 }}/>, but it didn&ap ...

Identify unique special characters without the need for a specific key code

When you press the backspace key, the console may display an empty string for keyVal, which can be misleading because even though it appears empty, keyVal.length is actually equal to 1 due to a hidden character. element.on('keydown',function(e){ ...

Vue Quasar Drawer Layout with Bottom Bar

Struggling to implement a footer in my q-drawer. Below is the template and component code I am currently using: <template> <q-layout view="hHh lpR fFf"> <q-header elevated> <q-toolbar> <q-btn flat de ...

Combining GET and POST requests in ExpressJS on a single route

As I work on setting up a questionnaire in Express JS with EJS as the renderer, I have already created individual pages for each question. These pages are accessible through static links using the app.get('/question/:number?', routes.questions) f ...

Express not invoking Passport LocalStrategy

I added a console.log statement in the LocalStrategy callback of passport.js, but it never seemed to execute. I am using Sequelize for ORM with MySQL. passport.js const LocalStrategy = require('passport-local').Strategy const passport = require( ...

Requesting data from a server using jQuery's AJAX functionality

Currently, I am utilizing the following piece of code for an ajax call: $('#filter').submit(function(){ var filter = $('#filter'); $.ajax({ url:filter.attr('action'), data:filter.serialize(), // form ...

Is there a way to make Vue.js recomputed properties force a recompute?

Below is the computed property of my component: methods: { addFavoritePlace(place_id) { axios.post('/api/add-favorite-place', { place_id: place_id }) .then(response => { // I require a specific command here. }); }, ...

Connect the plotly library to interact with the data in a Vue.js application through

I'm currently working on a project that involves using vue.js and the plot.ly JavaScript graph library. I am trying to figure out how to bind "pts" to the data's "TestSentences" in Vue. Below is my code snippet, thanks to everyone who has provide ...

Looping through an array in Vue using v-for and checking for a specific key-value pair

As I dive into my first Vue app, I've encountered a minor setback. Here's my query: How can I iterate through a list of dictionaries in Vue, specifically looping through one dictionary only if it contains a certain value for a given key? Provi ...

Enhance your browsing experience with Fire-fox add-on that automatically triggers JavaScript after YouTube comments have

I am currently working on creating an add-on for the Firefox browser. I have implemented a page-mod that triggers a script when specific pages (such as Youtube) are loaded, allowing it to communicate data back to the main script. However, I am encountering ...

Utilizing Nuxt for local import of the client exclusively

I recently came across VuePlyr and decided to integrate it into my Nuxt 2 project. Initially, I got it working by setting it up as a plugin in /plugins/vue-plyr.js, import Vue from 'vue' import VuePlyr from '@skjnldsv/vue-plyr' import & ...

How can I organize the selected options from a select2 form element using a basic sorting method?

I am utilizing select2 by ivaynberg and encountering an issue with the data arrangement upon submission. Is there a method to have the results in the form submit data reflect the order in which they were selected in the select2 element, without relying on ...

Implement modals using a for loop in Vue

I am facing an issue while trying to create modals for cards within loops. I attempted using v-bind:id="masa._id" and v-bind:data-target="'#'+masa._id", but the modal is not working. Can someone guide me on how to implement modals in loops? Belo ...

Is there a way to keep a label in a Material-UI TextField from getting obscured by an adornment when the input is not in focus?

Here is the code for my custom TextField component: <TextField fullWidth: true, classes, helperText: errorText, FormHelperTextProps: getInputProps({ error }), InputProps: getInputProps({ error, endAdornment: error ? <Warning ...

How to pass variables in AngularJS

When displaying data in a grid, I need to change the button icon on click of the active or inactive button. The functionality is working well, but I am having trouble finding the clicked active button to change its icon. In jQuery, we can use "this", but ...

What is the best way to sort through received JSON information?

I am attempting to create a simple command that retrieves information from imgur, locates the images, and then randomly selects which photo to display. The issue I am encountering is my inability to filter the responses based on specific criteria. Below is ...

Building a personalized django widget to enhance functionality on other websites

Currently, I am in the process of developing a new website that includes user statistics. My goal is to create a widget that can be embedded on other websites using JavaScript to pull data from my server and display the statistics for a specific user. Howe ...

Conceal an item if it is located past a certain point (from the viewpoint of the camera)

In the realm of three-dimensional space, imagine a cube represented by a THREE.Mesh that has been added to the scene. cube.position.set( 10, 10, 10 ); scene.add( cube ); Once you have rotated the scene using your mouse, the goal is to cleverly conceal th ...

Traversing through objects in react.js

Hello there, I'm currently learning React and JavaScript but facing some challenges with a particular task. Let's dive into it! So, imagine I have an array like this: clients = ["Alex", "Jimmy"] and then I proceed to create another array using th ...

What is the best way to adjust the width of floating divs to completely fill the space they occupy?

On the first picture, there are six equal divs displayed. As the screen size increases, the width of the divs also grows to fill up their space, like a table cell or another div. If there is enough space in the first row to accommodate the fourth div, it s ...