【vue】メソッドの書き方と呼び出す方法

2022年2月15日2022年2月19日 souki202

vueにはメソッド(関数)を設定できます。設定したメソッドは、vueのスクリプトからだけでなく、HTML側にクリック時の挙動などでも呼び出す設定を作ることができます。

1 メソッドの宣言
2 メソッドを呼び出す
- 2.1 HTMLから呼び出す
  - 2.1.1 引数にdataの値を使う
  - 2.1.2 引数がない場合
- 2.2 メソッド内でメソッドを呼び出す
3 メソッド呼び出し結果を表示する
4 mounted
5 まとめ

メソッドの宣言

createAppに入れる情報として、methodsを追加します。

const app = Vue.createApp({
    data() {
        return {
            value: 0,
        }
    },
    methods: {
        addValue(d) {
            this.value += d;
        },
    }
});

methodsが追加されています。ここに使えるようにしたいメソッドを書いていきます。ここに宣言したものは、スクリプト内だけでなく、HTML側で利用でも利用できます。

methods内のメソッドでdataに入れた値を用いる際は、this.値の名前で利用できます。同様に、this.メソッド名()でメソッドを呼び出すこともできます。

methodsは連想配列で、そこに複数のメソッドを設定することができます。ここではキー名の省略記法を利用しています。

つまり、上のaddValue(d) {...}は、addValue: function(d) {...}と同等です。

アロー関数はthisの挙動の違いで不都合が出るので、addValue: (d) => {...}という書き方はしないようにしましょう。

メソッドを呼び出す

HTMLから呼び出す

HTMLから呼び出す際は、@clickなど、イベントが発生したときに呼び出すのが多いと思います。

<button @click="addValue(5)">増やす</button>

@clickは、クリックしたときに動作させたい内容を書きます。ここではmethodsに入れたaddValueを利用したいのでその名前を入れます。

@clickは、v-on:clickの略です。そのため、<button v-on:click="addValue(5)">増やす</button>としても動作します。

これらのイベントハンドラは、ネイティブのイベントを一通り利用できます。詳しくは下の記事にあります。

ブラウザでイベントを発生させて処理をしよう

イベントとは、クリックや読み込み完了など、システムで生じた動作などのことです。ボタンをクリックしたというイベントから何かを動作させる、といった動…

this.addValue(5)とする必要はありません。thisは不要です。もっというと、HTML側でVueのdataやmethodsなどの値を使うときはthisは全部不要です。

実際に動作させてみましょう。

See the Pen vue1 method1 by Totori (@souki202) on CodePen.

クリックすると増えるボタンが完成しました!

引数にdataの値を使う

const app = Vue.createApp({
    data() {
        return {
            value: 0,
            d: 10,
        }
    },
    // ...
});

だったとして、dをaddValueの実引数にしたい場合、次のように書きます。

<button v-on:click="addValue(d)">増やす!!</button>

引数にdが入っていますね。thisは不要なので注意しましょう。

実際に動かしてみます。

See the Pen by Totori (@souki202) on CodePen.

10ずつ増えました!

引数がない場合

引数がない場合、()は不要です。

<button @click="addValue">増やす!!</button>

つまり、関数本体を渡すと、()を書かなくても引数なしで実行してくれるということです。

メソッド内でメソッドを呼び出す

値はthis.valueのように、dataの値の名前にthisを付けて利用しました。メソッドも同様にthisでアクセスできます。

const app = Vue.createApp({
    // ...
    methods: {
        addValue(d) {
            this.value += d;
            // 呼び出し
            this.adjustment();
        },
        adjustment() {
            if (this.value < 0) {
                this.value = 0;
            }
        }
    }
});

value:100、d:-10にしてチェックしてみましょう。

See the Pen vue1 method3 by Totori (@souki202) on CodePen.

0より小さくならないようになりました。しっかりメソッドを呼び出せています!

もちろん、methods外からメソッドを呼び出すこともできます。

メソッド呼び出し結果を表示する

{{ }}内に関数呼び出しをする形で書くと表示されます。

See the Pen vue1 method4 by Totori (@souki202) on CodePen.

しかし、このような形でメソッドを呼び出して描画することはあまりしません。後の章で紹介するcomputedのほうが適している場合がほとんどであるためです。

mounted

vueのマウント直後に一度だけ実行される処理を書きたい場合、mountedに処理を書きます。

mountedは、dataの実行後で、methodsなどが用意された後に実行されます。

マウントは、app.mount("#app");のようにしている場所です。

const app = Vue.createApp({
    data() {
        return {
            a: 10,
            b: 20
        }
    },
    // data()の実行後に実行される
    mounted() {
        this.a = 300;
        this.f();
    },
    methods: {
        f() {
            this.b = 500;
        }
    }
});

mounted() {...}が追加されました。上のdataと同様に関数そのものを設定します。mounted()はdata()の実行後に処理されるという点を意識しましょう。

挙動を見てみましょう。

See the Pen vue1 mounted by Totori (@souki202) on CodePen.

最初に入れた10と20は最初から上書きされていることがわかります。