kz’s blog

興味のあることについて書いていきます。

Vue.js で Buefy のラジオボタンの @change が拾えなくてハマった

はじめに

通常の Vue.js で作成したラジオボタンを Buefy で実装したら@changeが動作しなくなってしまいました。

調べても解決までに時間がかかったので、解決方法を書いておきます。

ちなみに、@changev-on:changeの省略記法になります。詳細はこちらを参照してください。

バージョン

"buefy": "^0.7.0"
"vue": "^2.5.17"

ソースコード

テンプレート

<template>
  <div>
    <h2>通常のラジオボタン</h2>
    <section>
      <label>
        <input
          type="radio"
          value="1"
          v-model="radio"
          @change="changeRadio('通常①')"
        />
        <span>通常①</span>
      </label>
      <label>
        <input
          type="radio"
          value="2"
          v-model="radio"
          @change="changeRadio('通常②')"
        />
        <span>通常②</span>
      </label>
    </section>
    <h2>Buefy のラジオボタン</h2>
    <section>
      <b-radio
        native-value="1"
        v-model="radio"
        @change="changeRadio('Buefy①')"
      >
        <span>Buefy①</span>
      </b-radio>
      <b-radio
        native-value="2"
        v-model="radio"
        @change="changeRadio('Buefy②')"
      >
        <span>Buefy②</span>
      </b-radio>
    </section>
    <section>click: {{ clickedRadio }}</section>
  </div>
</template>
<script>
export default {
  data () {
    return {
      radio: '1',
      clickedRadio: ''
    }
  },
  methods: {
    changeRadio (clickedRadio) {
      this.clickedRadio = clickedRadio
    }
  }
}
</script>

通常の Vue.js と Buefy を使用してラジオボタンを設置しました。 ラジオボタンの値を変更すると下にクリックした内容が出力されるようになっております。

動作内容はこちら

f:id:kz62:20181023213716g:plain

このように、Buefy を使用して設置したラジオボタンを変更しても@changeが動作していないことが分かります。

解決方法

Buefy を使用して設置しているラジオボタンの@change@change.nativeに変更する。これだけ。

変更箇所

    <h2>Buefy のラジオボタン</h2>
    <section>
      <b-radio
        native-value="1"
        v-model="radio"
        @change.native="changeRadio('Buefy①')" // 変更
      >
        <span>Buefy①</span>
      </b-radio>
      <b-radio
        native-value="2"
        v-model="radio"
        @change.native="changeRadio('Buefy②')" // 変更
      >
        <span>Buefy②</span>
      </b-radio>
    </section>

動作内容はこちら

f:id:kz62:20181023215310g:plain

無事、Buefy を使用して設置したラジオボタンの@changeも動作させることができました。

ただ、1点注意点が必要です。

注意点

@changeイベントが動作した際のプロパティの更新タイミングに差異がある。

検証用にソースコード変更

上で使用したソースを使い回し、methodsの中身を少し変更します。

  methods: {
    changeRadio (clickedRadio) {
      // ラジオボタンの v-model に設定しているプロパティを代入
      this.clickedRadio = this.radio
    }
  }

動作内容はこちら

f:id:kz62:20181023220219g:plain

お分かり頂けましたでしょうか。

Buefy を使用して設置したラジオボタンは@changeイベント中にプロパティを参照すると変更前の内容になってしまいます。

回避方法としては、ラジオボタンのnative-valueに設定している値は@changeのファンクションの引数として渡すことで代替できそうです。

おわりに

Beufi の公式ドキュメントを見ても答えが見つからなかった(隅々まで見たわけではない)ので、公式ドキュメント内で記述してある箇所がありましたら教えて頂けますと幸いです。

buefy.github.io