2017-10-15

[Vue.js] 見た目をカスタマイズしたチェックボックスの実装例

Demo

ソース

HTML

<label class="m-check">
  <input
    type="checkbox"
    class="m-check_input"
    :checked="value"
    @change="updateValue($event.target.checked)"
  >
  <span class="m-check_body">
    <span class="m-check_square"></span>
    <span class="m-check_txt">
      <slot></slot>
    </span>
  </span>
</label>

JS

Vue.component('check-component', {
  data: function() {
    return {};
  },
  props: ['value'],
  methods: {
    updateValue: function(value) {
      this.$emit('input', value);
    },
  },
  template: '#tpl-check',
});

呼び出し方

<check-component v-model="isAgree">利用規約に同意する</check-component>

解説

コンポーネント — Vue.js

上記リンクに記載の通り、

<check-component v-model="isAgree">利用規約に同意する</check-component>

は以下の糖衣構文になる。

<check-component
  :value="isAgree"
  @input="function(value) {isAgree = value}"
>
  利用規約に同意する
</check-component>

なので、check-componentに対して必要な作業は

• isAgreeとバインディングするpropとしてvalueを追加
• チェックボックスの状態が変化した際に、inputイベントをチェックボックスの現在の状態と共に emit

である。

これに従って実装すれば前述のようなソースになる。