CODEWITHSUNDEEP
vue.js
Christian Aldana
Christian Aldana

Reputation: 77

arithmetic operations in Vuejs Computed

it turns out that I want to perform some operations, but as much as I try I get errors, I hope they can help me. they wanted to perform some operations with 4 inputs

Example

these conditions must be met

         `Input 1     Input 2     Input 3    Input 4

               1) input3 = input1 / input 2
                   2) input2 = input1 * input 3
                       3) input2 = input 4`

currently is what I have

calcularPrecio: function(){
                var result=0.0;
                
                for(var i=0;i<this.arrayDetalle.length;i++){
                 result=result(this.arrayDetalle[i].precio*this.arrayDetalle[i].cantidad1)
                }
                return result;
            },

<input type="number"  v-model="calcularPrecio"  class="form-control">

<input v-model="detalle.cantidad1" type="number" class="form-control">

I hope you could help me with an example of how I could do it. Thank you so much

Upvotes: 0

Views: 599

Answers (1)

ChewySalmon
ChewySalmon

Reputation: 614

You could do this with simple functions:

methods: {

   calcA: function () {
       this.inputC = this.inputA / this.inputB

   },
   calcBA: function () {
       this.inputB = this.inputA * this.inputC

   },
   calcBB: function () {
       this.inputB = this.inputD

   },
}

or you could use computed properties:

computed: {
   outputA: function () {
       return this.inputA / this.inputB

   },
   outputB: function () {
       return this.inputA * this.inputC

   },
   outputC: function () {
       return this.inputD

   },
}

You could also use params for the methods, if that's what you want.

There's a 3rd option where you use watchers to watch input4 for example. On change, update input2.

Upvotes: 1

Related Questions