Harnessing the power of two-way data binding in VueJS

Question

Harnessing the power of two-way data binding in VueJS

I am looking to utilize Vue's two-way data binding to dynamically update the values of amount and total. The price of a given product is fixed. When users modify the amount, the total = amount * total will be automatically calculated. Similarly, users can input the total and the amount = total / price will be computed accordingly. However, I am currently stuck at this stage:

var app = new Vue({
  el: '#app',
  data: {
    amount: 1,
    price: 100,
  },
  computed: {
    calcTotal: function() {
      return this.total =
        parseFloat(this.amount) *
        parseFloat(this.price)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  amount: <input v-model="amount"> <br><br> price: <input v-model="price" disabled> <br><br> total: <input v-model="calcTotal"> <br><br>

</div>

javascript vue.js vuejs2

Answer 1

Answer №1

Instead of relying on the calculated property (calcTotal), you have the option to listen for the input-event from the <input> elements regarding the values of amount and total:

<input type="number" v-model="amount" @input="onAmountChange">
<input type="number" v-model="total" @input="onTotalChange">

The function associated with the amount input would update the value of total, and vice versa:

  data() {
    return {
      amount: 0,
      total: 0,
      price: 100,
    }
  },
  methods: {
    onTotalChange(e) {
      const total = e.currentTarget.value;
      this.amount = total / this.price;
    },
    onAmountChange(e) {
      const amount = e.currentTarget.value;
      this.total = amount * this.price;
    }
  }

new Vue({
  el: '#app',
  data() {
    return {
      amount: 0,
      total: 0,
      price: 100,
    }
  },
  methods: {
    onTotalChange(e) {
      const total = e.currentTarget.value;
      this.amount = total / this.price;
    },
    onAmountChange(e) {
      const amount = e.currentTarget.value;
      this.total = amount * this.price;
    }
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6214170722504c574c5355">[email protected]</a>"></script>

<div id="app">
  <div>amount: <input type="number" v-model="amount" @input="onAmountChange"></div>
  <div>price: <input type="number" v-model="price" disabled></div>
  <div>total: <input type="number" v-model="total" @input="onTotalChange"></div>
</div>

Answer 2

Instead of relying on the calculated property (calcTotal), you have the option to listen for the input-event from the <input> elements regarding the values of amount and total:

<input type="number" v-model="amount" @input="onAmountChange">
<input type="number" v-model="total" @input="onTotalChange">

The function associated with the amount input would update the value of total, and vice versa:

  data() {
    return {
      amount: 0,
      total: 0,
      price: 100,
    }
  },
  methods: {
    onTotalChange(e) {
      const total = e.currentTarget.value;
      this.amount = total / this.price;
    },
    onAmountChange(e) {
      const amount = e.currentTarget.value;
      this.total = amount * this.price;
    }
  }

new Vue({
  el: '#app',
  data() {
    return {
      amount: 0,
      total: 0,
      price: 100,
    }
  },
  methods: {
    onTotalChange(e) {
      const total = e.currentTarget.value;
      this.amount = total / this.price;
    },
    onAmountChange(e) {
      const amount = e.currentTarget.value;
      this.total = amount * this.price;
    }
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6214170722504c574c5355">[email protected]</a>"></script>

<div id="app">
  <div>amount: <input type="number" v-model="amount" @input="onAmountChange"></div>
  <div>price: <input type="number" v-model="price" disabled></div>
  <div>total: <input type="number" v-model="total" @input="onTotalChange"></div>
</div>

Harnessing the power of two-way data binding in VueJS

Answer №1

Similar questions

By default, Nuxt 2.15.7 is automatically installed when you create a new Nuxt app

Transparent background with opaque text

Numerous Axios GET calls made by various components

Validating a string with Hapi Joi validation for singles

The error message "Blazor WebAssembly JSRuntime.InvokeVoidAsync - blazor.webassembly.js:1 Uncaught (in promise) TypeError: Converting circular structure to JSON" indicates that

What is the method to ensure an element is displayed in Selenium WebDriver?

How come my total isn't zero after I get a 1 on the dice roll?

How can I run an ajax request in a loop where it only proceeds to the next loop value upon successful completion?

Steps to modify the border width upon gaining focus

Ways to retrieve the scroll position of content within an iframe

Choosing premier class and modifying characteristics

Transferring AJAX content to a Vue component

The Material-ui bug: multiple instances of the modal opening when a button is clicked

Tips for including input text in a select option dropdown menu

What causes the discrepancy in CSS behavior between local and remote websites?

Initiate a unidirectional ajax request

Troubleshooting a Messaging Error between Background and Another Script

Selenium Tips: Ensuring RemoteDriver Remains Connected to the Active Browser Tab

PHP Timer for Keeping Track of Time

Having issues getting Nunjucks templates to render correctly in Express