Mathematical operations for each tag in Vue 3?-CodePudding

There are 3 separate tags in my modal. I want to do different mathematical operations in each tag. There are 3 inputs in each tag. 2 of them to enter numbers and the other to give the result. For example, I have x y = z problem in the first tag and I have to find the z value. In the second tag, let the formula x y=z be the problem again, I have to enter the x and z values and find the y value.In the third tag I have to enter the y and z values in it and find the x value.My question is, I cannot write the values I need to find in 3 separate tags in a single computed?

Output:

Template:

           <form>
                <div >
                  <div >
                    <h6  for="purchasePrice">x</h6>
                    <input
                      type="text"
                      
                      autocomplete="off"
                      v-model="x"
                    />
                  </div>
                  <div >
                    <h6  for="salePrice">y</h6>
                    <input
                      type="text"
                      
                      autocomplete="off"
                      v-model="y"
                    />
                  </div>
                  <div >
                    <h6  for="marginResult">z</h6>
                    <input
                      type="text"
                      
                      autocomplete="off"
                      disabled
                      v-model="z"
                    />
                  </div>
                </div>
              </form>

Script

  data() {
    return {
      x: 0,
      y: 0,
      z: 0,
    };
  },
  computed:{
  },

CodePudding user response：

why are you using input text type? you can use number type in input field. if you need sum of text, you can remove parseInt and input type to text.

Check this code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue JS Intro</title>
</head>
<body>
    <div id="demo">
   <form>
                <div >
                  <div >
                    <h6  for="purchasePrice">x</h6>
                    <input
                      type="number"
                      
                      autocomplete="off"
                      v-model="x"
                    />
                  </div>
                  <div >
                    <h6  for="salePrice">y</h6>
                    <input
                      type="number"
                      
                      autocomplete="off"
                      v-model="y"
                    />
                  </div>
                  <div >
                    <h6  for="marginResult">z</h6>
                    <input
                      type="number"
                      
                      autocomplete="off"
                      disabled
                      :value="parseInt(x)  parseInt(y)"
                    />
                  </div>
                </div>
              </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
                x: 0,
                y:0,
              
            },

            }
        )
    </script>
</body>
</html>