Vue3 ディレクティブについて学ぼう（v-on）

今回は「v-on」について学ぼうと思います。

例のごとく公式ドキュメントが一番詳しく書いてあります。
そちらの内容を少しかみ砕くという形です。

基本の流れ

「v-on」はボタンクリック等のイベントに対応して実行されます。
ボタンクリックの例で考えてみます。

<div id="basic-event">
  <button v-on:click="クリック時の実施内容">ボタン名</button>
</div>

上記の書き方と同様。
<div id="basic-event">
  <button @click="クリック時の実施内容">ボタン名</button>
</div>

「クリック時の実施内容」は別途自分で定義した関数を定義するのが通常。
以下のようなことをするとエラーになる（alertのダイアログはでない）
※Vueでmountした範囲の情報しか取れない？

<div id="basic-event">
  <button @click="v-on:click="regist">ボタン名</button>
</div>

クリック以外にもDOMのイベントレベルで拾えるようですね。
Vueのドキュメントには「event」しか書いてなかったので。
DOMのevent一覧はwikiからでも参照

クリック時の関数の作り方

クリックしたときに、定義した関数を実行できると記載したが、どうやって関数を定義するのか？ということを確認すると 以下のように、オプションとして定義することが可能。
サンプルとして以下のような登録ボタンを考えると

(HTML側)
<div id="regist">
  <button class="button is-primary" v-on:click="regist">Regist</button>
</div>

(javascript側)
const regist = {
    methods : {
        regist() {
            console.log('click regist')
        }
    }
}
Vue.createApp(regist).mount('#regist');

詳細は、公式ページのDataについて記載されてるページを参照してください。

ちょっとはまったこと

以前の記事でプルダウンを作成したので、クリックするとプルダウンの中身が変わるようなものを作ってみようと思う。
（ダメパターン）

(HTML)
<div class="select">
  <select id="categorys">
    <option v-for="category in categorys" v-bind:value="category.value">
      {{ category.name }}
    </option>
  </select>
</div>
<div id="regist">
  <button class="button is-primary" v-on:click="regist">Regist</button>
</div>

(Javascript)
const categorys = {
    data() {
        return {
            categorys: [
                { name: 'category1', value: 1 },
                { name: 'category2', value: 2 },
                { name: 'category3', value: 3 }
            ]
        }
    }
}
Vue.createApp(categorys).mount('#categorys');

const regist = {
    methods: {
        regist() {
            this.categorys = [
                { name: 'modify1', value: 1 },
                { name: 'modify2', value: 2 },
                { name: 'modify3', value: 3 }
            ]
        }
    }
}
Vue.createApp(regist).mount('#regist');

Vueは挙動的に、Vue.createAppごとにデータを別途持っている？ぽくてデータの書き換えができなかった。
実施する場合は以下のようにするとできた。
（成功パターン）

(HTML)
<div id= "regist">
  <div class="select">
    <select id="categorys">
      <option v-for="category in categorys" v-bind:value="category.value">
        {{ category.name }}
      </option>
    </select>
  </div>
  <button class="button is-primary" v-on:click="regist">Regist</button>
</div>

(Javascript)
const regist = {
    data() {
        return {
            categorys: [
                { name: 'category1', value: 1 },
                { name: 'category2', value: 2 },
                { name: 'category3', value: 3 }
            ]
        }
    },
    methods: {
        regist() {
            // console.log(this);
            this.categorys = [
                { name: 'modify1', value: 1 },
                { name: 'modify2', value: 2 },
                { name: 'modify3', value: 3 }
            ]
        }
    }
}
Vue.createApp(regist).mount('#regist');

一つにまとめないといけないっぽい？ここら辺はもう少し調べたら追記するかも。