vue (nuxt)チェックボックス全選択/v-forとv-modelの複数/アイコン(fontawesome)サンプル

おすすめのオンラインプログラミング学習

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

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

こちらの記事がとても参考になりました。

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

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

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
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

なお、vuetifyjsやbootstrapvueを使う場合は、@clickではなく@changeになるようだ。

下記はbootstrapvueの例。

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

@changeのあとの括弧はあってもなくてもよい。つまり、toggleAllでも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はlist[index].aでも動きます。

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

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

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

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

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は使いませんでした。

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

チェックボタンを消すのは、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%);
}

チェックボックスでよく使うCSS

チェックボックスのチェックされたとき、全体の色を変えたいときに使います。

input:checked ~ .icon-checkbox {
  background-color: #323232;
}

CSSを~(チルダ)で繋ぐことができます。

同じ階層内にある、要素の後方の要素にCSSを適用する場合です。

inputタグの後ろにあるdivに適用します。前にあるdivには適用されません。

プラスとチルダの違い

チェックボックスで効く効かないが分かれます。

input:checked + .icon
input:checked ~ .icon

+は同一階層の直後の要素のみ、~は同一階層のすべての要素。

スポンサーリンク

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

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

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

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

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

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

他です。

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

Vue-Multiselect

選択ライブラリもあるのですね。

Vue-Multiselect | Vue Select Library.
Probably the most complete selecting solution for Vue.js, without jQuery.

selectコンポーネント比較です。

Vue.js用のselectコンポーネント比較 - FLINTERS Engineer's Blog
こんにちは、まるやまです。 現在仕事でVue.jsを使っていますが、最近そのVue.js用のselectコンポーネントをいくつか試してみたので使った感じや、問題点をまとめてみました。

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

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

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

vue (nuxt)やfirebaseの学習方法

【udemyで大人買い】vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。 現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしています。若干、個人的な覚書もかねているためお役立ち記事にしていきたいです...

参考になれば幸いです。

コメント

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