vue (nuxt)チェックボックス全選択/v-forとv-modelの複数/disabled/上限/fontawesome

2020年4月7日

vue (nuxt)チェックボックス関連の覚書です。

Contents

1 vue.jsのcheckbox(チェックボックス)ですべて選択・非選択
2 v-forとv-modelの複数チェックボックス
- 2.1 v-forのradioで入り込んだバグ
3 vue.jsでアイコンつきトグルボタンの作り方
4 vue.jsのcheckbox(チェックボックス)の上限
5 vue.jsのcheckbox(チェックボックス)の豆知識
- 5.1 Vueのチェックボックスのチェック方法
- 5.2 vue (nuxt)やfirebaseの学習方法

vue.jsのcheckbox(チェックボックス)ですべて選択・非選択

リセットボタンで全解除のサンプル

<b-form-checkbox v-model="isCheckboxResetAll" class="checkboxs" name="" @change="clearCheckbox">
  リセット
</b-form-checkbox>
<b-form-checkbox
  v-for="checkbox in checkboxs"
  :key="checkbox.name"
  v-model="selectedCheckboxIds"
  class="checkboxs"
  :value="checkbox.id"
  name=""
  @change="unclearCheckbox()"
>
  {{ checkbox.name }}
</b-form-checkbox>

最近はbootstrapを使わず、labelを作りinputにtype=”checkbox”を追加。divでv-forで回すことが多いです。

data() {
  return {
    checkboxs: [
      { id: 'checkboxs1', name: 'チェックボックス1' },
      { id: 'checkboxs2', name: 'チェックボックス2' },
      { id: 'checkboxs3', name: 'チェックボックス3' },
      { id: 'checkboxs4', name: 'チェックボックス4' },
      { id: 'checkboxs5', name: 'チェックボックス5' }
    ],
    isCheckboxResetAll: false,
    selectedCheckboxIds: [],
  }
},
methods: {
  clearCheckbox() {
    this.selectedCheckboxIds = []
    if (this.isCheckboxResetAll) {
      this.isCheckboxResetAll = false
    } else {
      this.isCheckboxResetAll = true
    }
  },
  unclearCheckbox() {
    if (this.isCheckboxResetAll) {
      this.isCheckboxResetAll = false
    }
  }
}

全選択などの参考文献のサンプル

こちらの記事がとても参考になりました。ありがとうございます。

https://qiita.com/chocolatina/items/0509b3d22a38b8fd5b4b

少しコードが違います。英語ですが。

https://makitweb.com/check-uncheck-all-checkboxes-with-vue-js/

別のやり方もあるようです。

https://edwardize.blogspot.com/2018/06/how-to-select-vuejs-check-all-uncheck.html

https://jsfiddle.net/thanhmabo/atxj3786/

vuetifyjsやbootstrapvueを使う場合の注意事項

なお、vuetifyjsやbootstrapvueを使う場合は、@clickではなく@changeになるようです。@changeのあとの括弧はあってもなくてもよい。つまり、toggleAllでもtoggleAll()ても。

ただ、違いとしては、括弧なしの場合、Eventオブジェクトが渡されてメソッドが実行されるよう。基本括弧はつけるようにしています。

bootstrapを使わない場合はclickで困ったことは今のところありません。

下記はbootstrapvueの例。

<b-form-checkbox
  v-model="allSelected"
  :indeterminate="indeterminate"
  aria-describedby="flavours"
  aria-controls="flavours"
  @change="toggleAll"
>

チェックボックスに応じて画像の表示・非表示を行う場合、v-ifの配列チェックはincludesを使うと簡単です。ES2015 でArray.some、ES2017でArray.includesが追加されました。indexOfは直感的ではありません。

<b-img
  v-if="selectedIds.includes('line')"
  class="connect"
  src="~/assets/images/line.png"
></b-img>

v-forとv-modelの複数チェックボックス

<div v-for="(l, index) in list" :key="index">
  <label :for="'a' + index">
    <input
      :id="'a' + index"
      v-model="l.a"
      :value="l.id"
      type="checkbox"
      name=""
      @change="change()"
    />
  </lavel>
</div>

v-modelはjavascriptのdataで参照しているものがそのまま入る場合もあります。作りによります。

また上記の場合、v-modelはlist[index].aでも動きます。

labelのforとinputのidは外しても動くようですが、紐ずけをわかりやすくするためにいれています。forとidは:(コロン)を外し、固定の文字列にした場合は動作がおかしくなります。

valueも省略可ですが、初期値としても使われ、MDNに次のように書かれていますので、入れています。

value 属性は常に省略可ですが、 checkbox, radio, hidden においては必須だと考えてください。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

nameも省略可で、シンプルにすると次のようになりますが、コードをわかりやすくするために入れておく派ですかね。

<div v-for="(l, index) in list" :key="index">
  <label>
    <input
      v-model="l.a"
      type="checkbox"
      @change="change()"
    />
  </lavel>
</div>

v-forのradioで入り込んだバグ

v-forで回し、valueに同じ値が2つあると2つ選択してしまう症状がありましたね。。

v-modelを使っているので両方に同期してしまうということでしょうか。CSSは後方のみ選択するため選択物と違ったものが色が変わりました。

診断アプリだったのでパラメーターの値割り振りにたまたま同じ値があったのですが、valueが固有の値ではないとラジオボタンになりません。今回はvalueをユニークな値にすることにより改善しました。

ユニークな値を渡し、診断時に文字列操作をするようにしました。

vue.jsでアイコンつきトグルボタンの作り方

トグルボタンはチェックボタンの一種です。

普通にCSSのみで作成でき、クリックしたときにJavascriptを呼べばOKです。

デザインはいろいろ工夫できるためコードの書き方がいろいろです。アイコンなしのコードはそこらじゅうに転がっているため、アイコンや文字が変わるパターンのものを探してみました。

個人的に好きなもの。この動画は2つのシンボルを切り替える形で、fontawesomeにも置き換えやすいですね。

作り方は文字で簡単に解説すると、relativeのlabelを背景とし、各要素をabsoluteしていく感じです。あとはアニメーションの初期値を各要素にもたせ、input[type=’checkbox’]:checkedでアニメーション後の指定をします。

他です。

vue.jsのcheckbox(チェックボックス)の上限

<div v-for="(item, index) in itemlist">
  <label>
    <input type="checkbox" :value="item.id" name="" v-model="selectedItems" :disabled="selectedItems.length >= max && selectedItems.indexOf(item.id) == -1" />
    {{item}}
  </label>
</div>

:value=”item.id”とselectedItems.indexOf(item.id)のitem.idはあわせる必要があります。

selectedItems.indexOf(item.id) == -1は定番の処理で見つからない場合、-1を返すためその処理です。

こちらのサンプルが参考になります。

https://jsfiddle.net/UDany/r9q4x85d/