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

プログラミング学習

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

PR記事:プログラミング学習Udemyのおすすめ動画全まとめ

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つほどで収まっている場合は、それだけでもいいでしょう。 しかし、ユーザーが自身で追加した項目など、何個出力されるか分からない場合があります。 ここではそんな時にあると便利な「すべて選択」を実装してみま...
qiita.com

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

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 it is easier for the users to check unche...
makitweb.com

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

how to select vuejs check all uncheck all checkboxes
Get free JavaScript tutorials, references, code, menus, calendars, popup windows, games, and much more.
edwardize.blogspot.com
vuejs checkbox all - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net

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: HyperText Markup Language | MDN
は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。 要素は入力型と属性の組み合わせの数が非常に多いため、 HTML の中で最...
developer.mozilla.org

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

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

アイコン型(fontawesome)のチェックボックスの作り方

bootstrapvueを使ってもできるのかもですが、勝手に適用されるコードが邪魔で四角のアイコンボタンを作る際にbootstrapvueは使いませんでした。

作り方はこちらを参照しました。ありがたい動画です。

基本のHtmlコードはこうです。

<label class="checkbox-name">
  <input />
  <span class="checkbox-name-icon">★</span>
  文字
</label>

まず、基本の考え方はAndroid、iOS、PCなどで使われるデフォルトのチェックボックスは消すこと。absoluteは消したチェックボックスが見えない小石のような感じで、ひっかって邪魔になるからです。他のフォームと整列した際に揃わない場合があります。

.checkbox-name input[type='checkbox-name'] {
  opacity: 0;
  position: absolute;
}

次に背景をどうするかです。マークだけ色をつけるのか、文字を含めてボタンにするのかです。

/*マークだけ*/
.checkbox-name span {
  background-color: #f6f4e9;
}
/*文字を含める*/
.checkbox-name {
  background-color: #f6f4e9;
}

基本のフレームさえできればあとは装飾なので簡単です。

チェックボタンを消すのは、display:none;では全部消えてしまうので領域の確保と当たり判定が可能なopacity:0;を使っているようです。チェックボタンはposition: absolute;でボックスの中にいれたのち、透明にしているようですね。詳しく動画をみてください。

動画では解説されていませんが、このボタンをつくるとき、hover時に子要素を動かしたい場合がでるかもしれません。

.parent::hover .child {
  color: #555;
}

childはclass名で指定する必要があるようで、次のような書き方ではうまくいきませんでした。

.parent::hover span {
  color: #555;
}

:hover時動かす場合、親と子の間に、+を入れると解説されているサイトもありますが、子要素の場合はあってもなくても動きます。

アイコンに文字をいれた場合、勝手に改行されて悩むかもしれません。width: 100%;で伸ばしてあげましょう。

.parent span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  font-size: 12px;
  font-weight: 900;
  color: #bfbfbf;
  text-align: center;
  transform: translateY(-50%) translateX(-50%);
}

fontawesomeの場合、ソースをみるとsvgです。次のような指定でもOKです。

.parent svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  font-size: 12px;
  font-weight: 900;
  color: #bfbfbf;
  text-align: center;
  transform: translateY(-50%) translateX(-50%);
}

ただ、直接指定すると、以前、セレクトボックスの矢印で困ったことになってしまいました。widthの塗りつぶすが効かずfontawesomeの幅になってしまいました。他にも方法はあるかと思いますが、個人的にはspanをかまして回避することが多いです。

fontawesomeのバージョン指定に注意

Twitterでも簡単な技術情報の配信をはじめました。

fontawesomeの無料版とpro版の違い

検索では無料とプロは分けられないようです。まあ、有料契約してほしいので、そうなっているのかなっと。。。iconを選んだときに以下のようなメッセだとプロ版のようです。

Start using this pro icon

この場合もアイコンは表示されないです。要注意ですかね。

スポンサーリンク

チェックボックスのCSSデザイン

チェック時のCSS

アニメーションなど含め、zennで詳しくは執筆してみました。

checkboxのデザインを変更する場合よく使うcss【Bootstrapは使う?(vue)】
zenn.dev

input:disabled・無効時のCSS

inputが無効のとき、アイコンの色が変わるサンプルです。cursor: not-allowed;はカーソル無効なので検証する際に手がかりになります。

.checkbox input:disabled + .checkbox-icon {
  color: #fff;
  cursor: not-allowed;
}

こういうサンプルも見かけたのですが、個人的に使ったことないですね。

.checkbox input:checked:disabled + .checkbox-icon {
  color: #fff;
  cursor: not-allowed;
}

checkboxのラベルが複数行(2行以上)の際、チェックボックス を上揃えにする

モバイル端末では意外に短い単語も複数行になってしまいます。他のやり方もあるようですが、stackoverflowさんにあるようにabsoluteが楽です。

Align checkbox and label using CSS
WooCommerce outputs its checkboxes like this... <label class="checkbox "><input class="input-checkbox " name="checkbox" id="checkbox" value=...
stackoverflow.com

checkbox multi line label cssあたりでぐぐりましょう。

子要素が縦横比が潰れる

親要素のpaddingが原因になっていることが多い気がします。

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

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

Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net

vue.jsのcheckbox(チェックボックス)の豆知識

Vueのチェックボックスのチェック方法

マスタッシュ構文で表示もできますが、Chromeの拡張を使うと次の方法で確認できます。

Vue > Components > 画面左で該当の箇所を選ぶ 画面右で値の確認をする

vue (nuxt)やfirebaseの学習方法

【udemyで大人買い】vue.js/vuex/vuetify/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。現在、個人的にnuxt.jsで個人開発をしています。若干、個人的な覚書もかねているためお役立ち記事にしていきたいです。本やUdemyの動画...
ebookbrain.net
1user

参考になれば幸いです。

コメント

タイトルとURLをコピーしました