'How to create a calculator without eval() in vuejs

How are you? I'm a little new to JavaScript and Vue and I'm having a little trouble switching from using eval() to something more secure. I read in forums and documentation that it is not good to use it but I am not able to replace it in the calculator I created. Could anyone help me out on what to do? Thank you. This is my code and I tryed use this question

Is there some function to create a simple calculator without eval

to change the eval() but I wasn't able to

<script>
export default {
  data() {
    return {
      getOperation: "",
      getResult: "0",
    };
  },
  methods: {
    handleClickAC() {
      this.getResult = "0";
    },
    handleClick(par) {
      if (this.getResult === "0") {
        this.getResult = par;
      } else {
        this.getResult += par;
      }
    },
    handleClickDel() {
      if (this.getResult.length > 1) {
        this.getResult = this.getResult.substring(0, this.getResult.length - 1);
      } else {
          this.getResult = '0'
      }
    },
    handleClickResult() {
        let operation = this.getResult
        this.getOperation = operation
        operation = operation.replace('x', '*')
        this.getResult = eval(operation)
    }
  },
};
</script>
<template>
  <div>
    <div>
      <div>
        <p>{{ getOperation }}</p>
        <p >{{ getResult }}</p>
      </div>

      <div class="botoes">
        <button @click="handleClickAC()">AC</button>
        <button @click="handleClickDel()">DEL</button>
        <button @click="handleClick('/')">/</button>

        <button @click="handleClick('7')">7</button>
        <button @click="handleClick('8')">8</button>
        <button @click="handleClick('9')">9</button>
        <button @click="handleClick('x')">X</button>

        <button @click="handleClick('4')">4</button>
        <button @click="handleClick('5')">5</button>
        <button @click="handleClick('6')">6</button>
        <button @click="handleClick('-')">-</button>

        <button @click="handleClick('3')">3</button>
        <button @click="handleClick('2')">2</button>
        <button @click="handleClick('1')">1</button>
        <button @click="handleClick('-')">+</button>

        <button @click="handleClick('0')">0</button>
        <button @click="handleClick('.')">.</button>
        <button @click="handleClickResult()">=</button>
      </div>
    </div>
  </div>
</template>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source