vue (nuxt)チェックボックス関連の覚書です。
目次
vue.jsのcheckbox(チェックボックス)ですべて選択・非選択のサンプル
こちらの記事がとても参考になりました。
少しコードが違います。英語ですが。
別のやり方もあるようです。
なお、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 においては必須だと考えてください。
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
選択ライブラリもあるのですね。
selectコンポーネント比較です。
Vueのチェックボックスのチェック方法
マスタッシュ構文で表示もできますが、Chromeの拡張を使うと次の方法で確認できます。
Vue > Components > 画面左で該当の箇所を選ぶ 画面右で値の確認をする
vue (nuxt)やfirebaseの学習方法
参考になれば幸いです。
コメント