0

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>
Letícia
  • 1
  • 3
  • 1
    See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval – Karlis Fersters Apr 15 '22 at 05:25
  • The question you linked already contains the solution. This is the way this needs to be done. Did you try it? What did not work? As for eval, it doesn't cause security issues here – Estus Flask Apr 15 '22 at 06:39
  • Does this answer your question? [Is there some function to create a simple calculator without eval](https://stackoverflow.com/questions/56308695/is-there-some-function-to-create-a-simple-calculator-without-eval) – Juho Vepsäläinen Aug 26 '22 at 03:15
  • See my answer to another similar question: https://stackoverflow.com/a/73495791/456536 – Míng Aug 26 '22 at 03:30
  • https://medium.com/@stoopidguy1992/how-to-write-a-math-expression-parser-in-javascript-b5147bc9466b – kennarddh Aug 26 '22 at 03:30

0 Answers0