Vueと共通

【Nuxt.js】input type="checkbox"をコンポーネント化する時のパターン

前置き

input type="checkbox"
チェックボタン部分のみを
コンポーネントにする時のコードを
書いています✍

シュガーシンタックス
v️-modelのおさらいから
実際のコンポーネントの
サンプルコードなどを
載せていきます🍀

参考:
Checkbox の Vue コンポーネントを作成する Tips
【Vue.js 再入門】 v-model を正しく理解して親子間コンポーネントのデータ伝播をマスターする
【Vue】Input内の値をv-modelのように親子間でバインドさせる方法【サンプルあり】
【Nuxt.js】ネストしたコンポーネントでv-modelの変更を親に反映させる
【Nuxt.js】フォームをコンポーネント化した時のメモ(子Componentで変更されたv-modelの値を親に反映する)


おさらい

v-modelはシュガーシンタックス
v-bind:valuev-on:input
これらを簡単に書けるものでした🌟

この例はtype="text"ですが、
それぞれのtype
入力タグに合わせた
属性のバインディング
そしてイベントにしてくれます💡

  • type="input", textareaタグ:value@input
  • type="checkbox", type="radio":checked@change
  • selectタグは:value@change

今回はチェックボックスなので
:checked@changeですね💡


パターン1: 定番

まずは定番の型。
おさらいでやった
type="text"
type="checkbox"
バージョンにしただけです。

@inputでも動きますが、
意味的にも@changeが良いですね🍀


デザインカスタムをするなら…

inputのデザインは変えられないため、
inputを見えないようにし、
spanで装飾をする必要がありますね💫

それを踏まえるとこんな感じ💡


パターン2: 子でv-model

親でv-modelはあっても
子でv-modelって
全然見たことないですよね?👀

子でチェックのON/OFFを
まとめて管理できるので、
使えると良いな〜😀💭

と思っていたら、
コードを書いてる記事を発見✨🔍
こんな感じです🍀


なんと親でも子でもv-model❗️笑

どういうこと❓と思っていたら
scriptに見慣れない
modelというものがありました。
Vueの公式を探して発見🔍
#model

こんな使い方もあるんですね…✨👏

参考:
【Nuxt.js】ネストしたコンポーネントでv-modelの変更を親に反映させる
【Vue.js 再入門】 v-model を正しく理解して親子間コンポーネントのデータ伝播をマスターする
【Nuxt.js】フォームをコンポーネント化した時のメモ(子Componentで変更されたv-modelの値を親に反映する)

そういえばVue3の変更点は
なんだったけな〜と思っていたら、
同じ箇所で複数使用できる、でした。
やりたいこととは違いますが、
備忘録的に残しておきます🌟
Vue3でv-modelがどう変わったか


これはNG

パッと思いついて
やりがちなのは、
v-modelの値をprops
親から渡す…
こんな感じではないでしょうか。

しかしこれだと
「読み書き」の「読み」
しかできないんです。

実際、チェックを触らなければ
エラーはないのですが、
つけ外しを行うとエラーになります💥✋


まとめ

form要素のコンポーネントを
パターン化しておきたいな〜
と思って今回はcheckboxに✍

type="text"以外は
結構ややこしくて
苦戦しています😵💦笑

でもこれが理解できたら
すごく便利だし、
form要素ってinputtype
他のタグも入れたら結構あるし、
コンポーネントにして
スッキリ分けたいじゃないですか…🧹

なので各要素の記事と、
各要素の良いコードを抜粋して
全部を一覧で見れる記事を
書こうと思っています…🎈🧸

-Vueと共通
-,

© 2021 aLiz Nuxt