Require the subtraction of a certain value to impact the value of a different input

I am currently working on adjusting the value of money_due by subtracting the deposit amount from it if there is a value entered in the deposit field. While it successfully adds the deposit to the total, it does not remove it when the deposit field is emptied.

      <div class="col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
          <label>Total Amount Due <span class="note">2</span></label>
          <input type="text" class="form-control" v-model="document.money_due" placeholder="">
        </div>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
          <label>Deposit <span class="note">2</span></label>
          <input type="text" class="form-control" @change="hasDeposit" v-model="document.deposit" placeholder="">
        </div>
      </div>

    data() {
      return {
        now: new Date().toISOString(),
        document: {
          deposit: '',
          money_due: '',
        }
      }
    },

this.document.deposit = this.listing.price;
this.document.money_due = this.document.last_month + this.document.security_deposit,

    methods: {
      hasDeposit() {
        if(this.document.deposit == '') {
          return this.document.money_due = this.document.money_due + this.document.deposit;
         } else {
           return this.document.money_due = this.document.money_due;
        }
      },

    mounted() {
      this.hasDeposit();
    },
javascriptvue.js

Answer №1

Apologies, it seems a bit unclear what your code is aiming to achieve.

In an attempt to demonstrate the relationship between deposit and money_due, I have created a code snippet below:

new Vue({
  el: "#app",
  data: {
    listing: {
      price: 10
    },
    document: {
      last_month: -20,
      security_deposit: 10,
      deposit: 0,
      money_due: 0
    },
  },
  computed: {
    hasDeposit() {
      return Number(this.document.money_due) + Number(this.document.deposit)
    }
  },
  mounted() {
    this.document.deposit = this.listing.price;
    this.document.money_due = this.document.last_month + this.document.security_deposit
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label>Total Sum Due <span class="note">2</span>
  <input type="text" class="form-control" v-model="hasDeposit" placeholder=""></label><br />

  <label>Deposit <span class="note">2</span>
  <input type="text" class="form-control" v-model="document.deposit" placeholder=""></label>
</div>

  1. I fabricated the referenced data in your code

  2. Moved hasDeposit() from being a method to a computed property (as it only returns a calculated value)

  3. Altered the content within the mounted method

I trust this meets your expectations.

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

Is there a way to add a dropdown option to one of these links?

Is it possible to add a dropdown menu under any of these navigation links? `import React, { Component } from 'react'; import {Link} from 'react-router-dom'; export class Nav extends Component { state = { toggle: false } ...

javascriptreactjsnavbarnav

Android Webview onLoad function provides incorrect height information

When I load a file:// URL into the webview, issues with height calculation arise. Instead of using WRAP_CONTENT, I calculate the height in javascript during the onPageFinished event in Android. However, about 2 out of 5 times, the javascript reports an inc ...

javascriptandroidwebview

Having difficulties with installing the most recent version of nodejs

I've attempted various methods, such as using nvm, but I'm stuck with an outdated version of nodejs (v10). Any suggestions on how to update it? Err:12 http://ppa.launchpad.net/ubuntu-vn/ppa/ubuntu focal Release 404 Not Found [IP: ...

node.jsvue.jsnpm

Understanding the behavior of a React component when passed as a prop

Typically, components are passed down as children to another component. However, I have noticed in some UI libraries that components can also be passed using standard named props. I attempted this approach myself but encountered some limitations without an ...

javascriptreactjs

css clip-path hover effect restricted to specific shape

In the codepen I created, there are two greyscaled shapes. Currently, it's only possible to hover over one of them, as the original size is a box that overlaps both images. Is there a way to detect the shape being hovered over? Z-index hasn't pro ...

javascripthtmlcss

Connecting to multiple websocket servers with vue-socket.io is a breeze. Let's dive into

Seeking guidance on connecting to two different web-socket servers from a VUE client using vue-socket.io: import { store } from '@/store/store' import { store2 } from '@/store/store2' Vue.use(Vuex) Vue.use(VueSocketio ...

vue.jsvuex

`npm run build` fails to create the `index.html` file

Upon executing the command npm run build in my Vue.JS project, I noticed that there is no index.html file in the dist directory. https://i.sstatic.net/ens6a.jpg The contents of my webpack.base.config.js file are as follows: // Your webpack base config c ...

npmvue.js

The React input field seems to be unresponsive to updates

I'm working on a React/Next application where users can create and update notes/jobs. However, I am facing an issue with my onChange={handleChange} function when trying to edit the input fields. Can anyone point out what might be going wrong? Thank y ...

javascriptreactjsapinext.js

Executing a function after the completion of another

Here is my function: function functionName($results) { //do some stuff disableSave() } When this function runs, I want to call the enableSave() function. How can I achieve this? I attempted to pass the function as a callback but I am unsure wher ...

javascriptjquery

A guide to accessing the Gridsome Image path within the main.js script

My site doesn't have og:image tags and isn't displaying images on LinkedIn. The fix is to include the meta tag, but after building and deploying the project, the image names change. I'm looking for a solution where the actual generated imag ...

vue.jsgridsomevue-meta

What is the solution to pausing $ionicLoading when a promise is being fulfilled?

I created an ionicLoading with a function called startNow() to navigate from original-page to my-next-page. The first time, I simply invoke startNow() which takes me directly to my-next-page after the $timeout() service is triggered. However, I encounter ...

javascriptangularjsionic-frameworkloading

Breaking down classes and cross-referencing them with a different DIV using JQuery

Trying to create a variable named relatedBoxes that will store checkboxes sharing similar classes as the box div. To do this, I am splitting up the classes and storing them in a variable called splitClass. Now, all that's left is to find out if any o ...

javascriptjqueryclassjquery-selectors

The setInterval function continues executing even after the page has been changed

I'm encountering an issue with my function where it continues to run even after the page has changed, resulting in an error. How can I go about stopping this behavior? Thank you! componentDidMount() { var current = 0; var slides = document.g ...

javascriptreactjstypescript

Using "Datedropper" in Javascript to automatically populate values in additional input forms

I recently downloaded a "Jquery datedropper" and wanted to incorporate it into my form. Unfortunately, the javascript code does not specify a form field by an "id" or "name." Here is a picture of the problem. As a result, the datedropper is implemented in ...

javascriptjqueryforms

Error in NodeJS: 'Cannot alter headers once they have been sent.'

My project involves developing an app with Express that fetches tweets from Twitter. Each API call retrieves 200 tweets (or fewer if there are less than 200) and in total, I need to retrieve 1800 tweets. To achieve this, I use a time interval to make multi ...

javascriptnode.jsexpress

Executing Functions in ReactJS When Component is Rendered

I have a question regarding ReactJS: Is there a way to execute a method once all the JSX components (<div> components </div>) have been successfully rendered? If certain components are only rendered under specific conditions, can I trigger a m ...

javascriptreactjstypescript

What could be preventing my function from being invoked at regular intervals?

I have been attempting to trigger a function every few seconds with the following code snippet: HTML: <div id="Result">Click here for the message.</div> JS: $(document).ready(function () { $("#Result").click(function () { var ...

javascriptjqueryhtml

Choosing a specific element within another element of the same type using JQuery

I've created a complex nested HTML structure shown below: <ul class="root"> <li>Foo 1 <label class="bar-class">bar</label> <ul> <li>Foo 2 <label class="bar-class">bar</label> ...

javascriptjqueryhtml

Why is Angular.orderBy not displaying any data on the Page?

Embarking on my first Angular project with Firebase Firestore, I am excited to showcase some of the code below. I recently learned Angular and here is what I have accomplished so far: Component.html <section class="rank"> <p class=& ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Double the excitement with jQuery UI's bouncing images

Hi everyone, this is my first time posting here so I apologize in advance if there are any issues with my markup. I'm still getting used to the SOF framework for writing posts. Currently, I am working on trying to make social icons bounce on hover on ...

javascriptjquerycssuser-interfacebounce