Nuxt.jsでcheckboxを使った状態切替UIをコンポーネントにするとうまく動作しない!?

こんにちはレオです。

Nuxt.jsでUIをコーディングする際、Atomicデザインの手法でパーツをコンポーネント化して開発しています。

その中で、inputタグのcheckboxをガシガシに装飾しコンポーネントにして使用しているのですが、例えばサインアップフォームなどでよくある利用規約のチェックボックスなんかは正常に動作します。

しかし、状態を保持してユーザーが操作できるトグル的なチェックボックスとしてコンポーネントを使用すると正常に動作しません。

iPhoneのUIで言うと設定アプリ内の機内ボードのトグル風チェックボックスみたいに、ユーザーのデータを取得してtrueかfalseでトグルを表示したいといったそんなチェックボックスです。 

伝わりますかね?

現状の回避策としては、そういったinputタグのcheckboxはコンポーネントにせず、使いたい場所でスタイルを書くか、グローバルなCSSでスタイルを当てて使用するという方法をとっています。

自分のスキルが足りないのか、そもそも不可能なのかはわかりませんが、もし解決方法をご存知の方がいれば教えていただきたいです。

解決案はこちらに

  • Facebook
  • Twitter
  • LINE
  • はてぶ
  • Pocket
  • コピー OK

人気記事