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

プログラミング学習

2022.10.12

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

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
    }
  }
}

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

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

Vue.jsで「すべて選択」を実装する - Qiita

checkboxを並べて、それが3つほどで収まっている場合は、それだけでもいいでしょう。しかし、ユーザーが自身で追加した項目など、何個出力されるか分からない場合があります。ここではそんな時にある…

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

Check Uncheck All Checkboxes with Vue.js

Checkboxes are used on the page to allow the user to select multiple items from the list. By Adding check all checkbox i

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

how to select vuejs check all uncheck all checkboxes

Get free JavaScript tutorials, references, code, menus, calendars, popup windows, games, and much more.

vuejs checkbox all - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

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 においては必須だと考えてください。

: HTML 入力要素 - HTML: ハイパーテキストマークアップ言語 | MDN

は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できま

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を返すためその処理です。

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