Vue.js 電卓作成の上で文字（演算子）を連続して入力しない方法

Question

前提・実現したいこと

Vueで電卓作成をしています。
基本は
https://qiita.com/Naoto9282/items/4db4a854e151f310d517
を参考にしてますが色々変えながらやっています。

発生している問題・エラーメッセージ

上記を参考に以下のソースコードのように演算子を連続させないために色々if文を使って作成しようとしているのですが、+を入力した時はうまくいくのですがその他(-.*,/)を入力すると作動しません。
+を入力したあとに他の演算子を入力しても表示されないのでこの部分は作動していると思われます。
この部分に関するエラーメッセージは特に見当たりません...

該当のソースコード

        <table id="app">
          <tr>
            <td colspan="3" class="result">
              <input type="text" class="ip-result" id="total" v-model="total.toLocaleString()" readonly />
            </td>
            <td><button value="C" v-on:click="calculationOpe('C')">C</button></td>
          </tr>
          <tr>
            <td>
              <button class="btn" v-on:click="calculationNum('7')">7</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationNum('8')">8</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationNum('9')">9</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationOpe('/')">÷</button>
            </td>
          </tr>
          <tr>
            <td>
              <button class="btn" v-on:click="calculationNum('4')">4</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationNum('5')">5</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationNum('6')">6</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationOpe('*')">×</button>
            </td>
          </tr>
          <tr>
            <td>
              <button class="btn" v-on:click="calculationNum('1')">1</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationNum('2')">2</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationNum('3')">3</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationOpe('-')">-</button>
            </td>
          </tr>
          <tr>
            <td>
              <button class="btn" v-on:click="calculationNum('0')">0</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationNum('.')">.</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationOpe('+')">+</button>
            </td>
            <td>
              <button class="btn" v-on:click="calculationOpe('=')">=</button>
            </td>
          </tr>
        </table>

calculationOpe: function (num) { // 演算子を押したとき
    if (num === '=') { // =を押したとき
        this.total = Function('"use strict";return(' + this.total + ')')();
    } else if (num === 'C') { // Cを押したとき
        this.total = '';
    }
    else if (num === '+') {                         // +を押したとき
        var pl = this.total.slice(-1);              //計算式中の最後の文字を取得
        if (pl.includes('+','-','*','/')) {         //最後の文字が+,-,*,/のとき
            num = '';                               //+の入力を無効
        } else {                                   //最後の文字が+じゃないとき
            this.total += num;                     //そのまま入力
        }
    }
    else if (num === '-') {                         // -を押したとき
        var mi = this.total.slice(-1);              //計算式中の最後の文字を取得
        if (mi.includes('+','-','*','/')) {         //最後の文字が+,-,*,/のとき
            num = '';                               //-の入力を無効
        } else {                                   //最後の文字が-じゃないとき
            this.total += num;                     //そのまま入力
        }
    }
    else if (num === '*') {                         // *を押したとき
        var mu = this.total.slice(-1);              //計算式中の最後の文字を取得
        if (mu.includes('+','-','*','/')) {         //最後の文字が+,-,*,/のとき
            num = '';                               //*の入力を無効
        } else {                                   //最後の文字が*じゃないとき
            this.total += num;                     //そのまま入力
        }
    }
    else if (num === '/') {                         // /を押したとき
        var de = this.total.slice(-1);              //計算式中の最後の文字を取得
        if (de.includes('+','-','*','/')) {         //最後の文字が+,-,*,/のとき
            num = '';                               ///の入力を無効
        } else {                                   //最後の文字が/じゃないとき
            this.total += num;                     //そのまま入力
        }
    }
},

試したこと

+では作動するということは同一の関数内に演算に関する記述してはいけないのかと思い演算ごと(+,-,*,/)で関数を作成し直してみましたが変わらず。言語化してみて変な部分が無いかチェックしたのですが現時点での私からすると特に変なところは見当たらず...

Answer 1

String.prototype.includes()はsearchString(検索文字列)を1つしか受け入れません。

'+'の分岐では'+'が1つ目の引数なので正しく動作してしまいますが、'-'以降の分岐では'+'しか判定されないので動作しません。

正規表現を使うか【JS】includes()で特定要素を複数指定したいときなどを参考にして独自関数を作ってください。

---

同じ様な判定部分を4回(+,-,*,/)重複して記述するのはミスにつながるので、関数にまとめたほうが良いと思います。

Comments

[jkla444]

ご回答ありがとうございます。
includes()は一つしか要素を指定できないみたいですね。
さらに演算子ごとに条件分けしたら解決しました！

Answer 2

省略しますが以下のようにさらに条件分岐すると上記問題は解決しました。
ただ記述が長いので関数化してまとめていったりしようと思います。

else if (num === "+") {
  // 前の文字が演算子のとき無効
  var pl = this.total.slice(-1);
  if (pl.includes("+")) {
    num = "";
  } else if (pl.includes("-")) {
    num = "";
  } else if (pl.includes("*")) {
    num = "";
  } else if (pl.includes("/")) {
    num = "";
  } else {
    this.total += num;
  }
}