Помогите разобраться с vue.js. Проблема с калькулятором

Question

После любой операции, к примеру сложения, и нажатии на равно. Счет продолжает увеличиваться если нажимать на другие цифры, без нажатия на равно. К примеру 2+2 = 4. Потом нажимаете просто на цифру 5, а, он у меня плюсует 5+4 = 9. И такая же проблема с делением.

Vue.createApp({
  data() {
    return {
      item: ['-', 9, 8, 7, '+', 6, 5, 4, '.', 3, 2, 1, 0, '*', '/'],
      displayValue: '',
    };
  },
  methods: {
    buttonShow(num) {
        this.displayValue += num; 
    },
    clear() {
      this.displayValue = '';
    },
    calc() {
      this.displayValue = Math.floor(eval(this.displayValue) * 100) / 100;
    },
    back() {
      if (this.displayValue) {
        this.displayValue = this.displayValue.substring(
          0,
          this.displayValue.length - 1
        );
      }
    },
    percent() {
      this.displayValue = this.displayValue / 100;
    },
  },
}).mount('#app');

[v-cloak] { 
   display: none;
}

.grid{ 
   max-width: 360px;
   margin: 50px auto;
   padding: 20px;
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(4, 1fr);
   background-color: #233244;
   user-select: none;

}

.item {
   padding: 15px;
   border: none;
   color: white;
   font-size: 28px;
   background-color: #31455e;
   cursor: pointer;
   transition: .3s ease-in;
}

.item:hover{
   transform: scale(1.05);
   background-color: turquoise;
}

.input {
   background-color: #31455e;
   grid-column: 1/-1;
   height: 50px;
   outline: none;
   text-align: right;
   padding-right: 10px;
   font-size: 28px;
   color: white;
}

.equally{
   grid-column: 4/-1;
   grid-row: 5/7;
}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Calculator</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id='app' v-cloak>
      <div class="grid">
         <input class="input" type="text" readonly v-bind:value="displayValue">
         <button class="item" @click="clear()">C</button>
         <button class="item back" @click="back()">&loarr;</button>
         <button class="item" @click="percent()">%</button>
         <button class="item" v-for="i of item" @click="buttonShow(i)">{{i}}</button>
         <button class="item equally" id='equally' @click="calc()">=</button>
      </div>
   </div>
   <script src="https://unpkg.com/vue@next"></script>
   <script src="main.js"></script>
</body>

</html>

БЛОГ НА HUSL

Помогите разобраться с vue.js. Проблема с калькулятором

Ответы (0 шт):