arithmetic operations in Vuejs Computed

Question

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

Are you trying to check if the value of Input1/Input2 equals to Input3? Can you please provide javascript code that you are using! — WMRamadan
– WMRamadan, Commented Aug 1, 2020 at 4:25
It doesn't make sense that input2 is dependent on input4 and input1 * input3, if you're looking to use computed functions. Unless you want the input returned separately, for which input2 would be two different computed properties. — ChewySalmon
– ChewySalmon, Commented Aug 1, 2020 at 4:30

ChewySalmon · Accepted Answer · 2020-08-01 04:37:24Z

1

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.

answered Aug 1, 2020 at 4:37

ChewySalmon

6348 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christian Aldana Over a year ago

and the result of the outputs as the subjects to the inputs?

Collectives™ on Stack Overflow

arithmetic operations in Vuejs Computed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related