vue (nuxt)チェックボックス関連の覚書です。
目次
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
}
}
}全選択などの参考文献のサンプル
こちらの記事がとても参考になりました。ありがとうございます。
少しコードが違います。英語ですが。
別のやり方もあるようです。
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 においては必須だと考えてください。
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;
}absoluteにtopもleftもいれないことにより、この要素で完結しています。relativeいらずです。
次に背景をどうするかです。マークだけ色をつけるのか、文字を含めてボタンにするのかです。
/*マークだけ*/
.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のバージョン指定に注意
Font Awesomeのサイトがいつのまにかリニューアル!
— 個人開発作家 まったりんneru (@neruplan) March 8, 2022
検索にバージョン指定がついているhttps://t.co/JhHc9oDVSm
バージョンにより名前が変わるものがあるため注意!
5 ‘chevron-circle-down’
6 ‘circle-chevron-down’#プログラミング独学 #エンジニアと繋がりたい #Webデザイナーと繋がりたい
Twitterでも簡単な技術情報の配信をはじめました。
fontawesomeの無料版とpro版の違い
検索では無料とプロは分けられないようです。まあ、有料契約してほしいので、そうなっているのかなっと。。。iconを選んだときに以下のようなメッセだとプロ版のようです。
Start using this pro icon
この場合もアイコンは表示されないです。要注意ですかね。
チェックボックスのCSSデザイン
チェック時のCSS
アニメーションなど含め、zennで詳しくは執筆してみました。
lebelとinputを階層する際にforはいらない
階層にするときidやforはいらないです。むしろfor入れるとチェックボックス以外をクリックしたい際に動かないようです。
<label>
<input />
</label>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が楽です。
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を返すためその処理です。
こちらのサンプルが参考になります。
vue.jsのcheckbox(チェックボックス)の豆知識
Vueのチェックボックスのチェック方法
マスタッシュ構文で表示もできますが、Chromeの拡張を使うと次の方法で確認できます。
Vue > Components > 画面左で該当の箇所を選ぶ 画面右で値の確認をする
vue (nuxt)やfirebaseの学習方法
参考になれば幸いです。
コメント