Vue.js methods内での関数の呼び出し方法

前提・実現したいこと

Vue.jsで電卓の作成をしているのですが、methods内で作成した関数をmethods内で呼び出す方法についてご教授いただけますでしょうか。

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

はじめに関数を作成し、その後各演算子を押したときに同じ関数を呼び出したいと思いソースコードの通りにしたのですが、演算子を押したら以下のようなメッセージが表示されます。
なぜここでthis.total.sliceのエラーが出るのか理解できませんでした...
どなたかご教授いただけますでしょうか。

エラーメッセージ
TypeError: this.total.slice is not a function

該当のソースコード

HTML
1        <table id="app">
2          <tr>
3            <td colspan="3" class="result">
4              <input type="text" class="ip-result" id="total" v-model="total.toLocaleString()" readonly />
5            </td>
6            <td><button value="C" v-on:click="calculationOpe('C')">C</button></td>
7          </tr>
8          <tr>
9            <td>
10              <button class="btn" v-on:click="calculationNum('7')">7</button>
11            </td>
12            <td>
13              <button class="btn" v-on:click="calculationNum('8')">8</button>
14            </td>
15            <td>
16              <button class="btn" v-on:click="calculationNum('9')">9</button>
17            </td>
18            <td>
19              <button class="btn" v-on:click="calculationOpe('/')">÷</button>
20            </td>
21          </tr>
22          <tr>
23            <td>
24              <button class="btn" v-on:click="calculationNum('4')">4</button>
25            </td>
26            <td>
27              <button class="btn" v-on:click="calculationNum('5')">5</button>
28            </td>
29            <td>
30              <button class="btn" v-on:click="calculationNum('6')">6</button>
31            </td>
32            <td>
33              <button class="btn" v-on:click="calculationOpe('*')">×</button>
34            </td>
35          </tr>
36          <tr>
37            <td>
38              <button class="btn" v-on:click="calculationNum('1')">1</button>
39            </td>
40            <td>
41              <button class="btn" v-on:click="calculationNum('2')">2</button>
42            </td>
43            <td>
44              <button class="btn" v-on:click="calculationNum('3')">3</button>
45            </td>
46            <td>
47              <button class="btn" v-on:click="calculationOpe('-')">-</button>
48            </td>
49          </tr>
50          <tr>
51            <td>
52              <button class="btn" v-on:click="calculationNum('0')">0</button>
53            </td>
54            <td>
55              <button class="btn" v-on:click="calculationNum('.')">.</button>
56            </td>
57            <td>
58              <button class="btn" v-on:click="calculationOpe('+')">+</button>
59            </td>
60            <td>
61              <button class="btn" v-on:click="calculationOpe('=')">=</button>
62            </td>
63          </tr>
64        </table>

JavaScript
1// 前の文字が演算子のとき無効にする
2function operator() {
3    var pl = this.total.slice(-1);
4    if (pl.includes('+')) {
5        num = '';
6    } else if (pl.includes('-')) {
7        num = '';
8    } else if (pl.includes('*')) {
9        num = '';
10    } else if (pl.includes('/')) {
11        num = '';
12    } else {
13        this.total += num;
14    }
15}
16// 先頭に演算子を置けない
17if (this.total == '') {
18    num = ''
19}
20if (num === '=') {
21    //「〇〇*=」で累乗
22    var ex = this.total.slice(-1);
23    if (ex === '*') {
24        this.total = Math.pow(this.total.slice(0,-1), 2);
25    }
26    // 計算結果の表示
27    myTotal = Function('"use strict";return(' + this.total + ')')();
28    this.total = myTotal;
29} else if (num === 'C') {
30    // 表示結果をクリア
31    this.total = '';
32} else if (num === '+') {
33    operator();
34} else if (num === '-') {
35    operator();
36} else if (num === '*') {
37    operator();
38} else if (num === '/') {
39    operator();
40}

試したこと

関数の作り方が間違ってるのかと思い何通りか試しましたが変わりませんでした。（そのやり方も間違っていたかも...？）

行動規範の内容に同意します

回答2件

ベストアンサー

Vueの関数内関数ではスコープが関数になり、Vueインスタンスを指していたthisが関数を指すことになります。

いくつか解決方法を紹介します。

1. thisをbindする

operator.bind(this)();

関数呼び出し時のthisが関数にbindされるので、今回であれば関数内のthisがVueインスタンスとなります。

2. thisを渡す

operator(this)

3. Vueインスタンスのメソッド化する

operator :function () {
    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;
    }
}

この辺はVue this functionで検索すればより詳しい内容が出てくるはずです。

投稿2021/07/11 03:45

編集2021/07/13 12:28