うまく動かんやん…
こうした悩みと解決方法を示します。
Vueが初めての人はこちらの記事の方が良いかも。
ラジオボタンを２回押さないと反映されない
ラジオボタンのイベント発生にはv-on:clickではなく、v-on:changeを用いる。
clickイベントは押した瞬間に実行するので、変数が変わる前に処理される。
一方で、changeイベントだと状態が変わった後に実行されるため、変数が変わっている。
たぶんこんな感じです。どこ参照しても見つけられてませんが、たぶんこの動きです。
ラベルでボタン横のテキストクリックしてるのに反応しない
ボタンにIDを割り当てて、ラベルにforでIDと連携させましょう。
<input type="radio" id="test" value="1">
<label for="test">テキスト入力</label>{{〇〇}}の〇〇をHTMLとして扱いたい
タグ内にv-htmlでHTMLとして扱いたい要素を選択するとよいです。
{{}}で囲うと文字列として扱われます。下記参照ください。
See the Pen vueテキストでなくHTML by Hidenori Himeno (@hidenori-himeno) on CodePen.
{{}}はそもそも何と呼ぶの
{{}}はMustache（マスタッシュ）構文と呼ぶようです。
コンポーネント間のデータの受け渡し
親→子はprovide、子→親はinjectでデータ受け渡しできます（Vue3）。
Vue2以前はpropsで親→子、emitで子→親に対するデータ受け渡しができていたようですが、親から孫にアプローチするのに親→子→孫と1層ずつしか受け渡しできない欠点がありました。
Vue3では層を問わず受け渡しが可能になり、冗長化を防ぎ、コードも簡単になって便利になりました。
＜サンプルコード＞
clickとv-modelは共用できない
画像をクリックしたらポップアップ（モーダル）させる処理を入れようと、ポップアップ画像にv-model経由でURL入れようとしたら入らない。
そもそも、v-modelは、v-bindとv-on:inputが合わさったもので、都度イベント発生することで処理が実行されている。（参照：公式サイト）
要するにv-modelは変更が生じた瞬間に直ちにイベント発生してv-bindでつなげた変数に反映されるものと考える。
clickとv-modelを共存させるとイベントが競合してしまう事態となっており、実動作としてはclickイベントが優先実行された。
結局URLの受け渡しは、引数として関数で受けて変数格納することで対応した。
詳細はこちら↓
CSSを動的に変更するにはどうすればよいか
HTML部にv-bind結合したstyleを記述し、そのstyle内に変数を入れてやります。
詳細はこちら↓
トランジションがうまくいかない
表示のenter、非表示のleave。
始点をv-enter/v-leave、終点をv-enter-to/v-leave-toのように-toをつける。
始点-終点間をv-enter-acitive/v-leave-activeのように-activeをつける（ここで速度とか制御を加える）。
transitionタグにnameをつければ、v-→name-と変えることでトランジションタグを個別に制御できます。
使い方の詳細は公式を参照ください。
単一要素/コンポーネントのトランジション
v-ifの表示制御の際に、ふわっと表示させたかったのですが、参照がvue2のドキュメントで、vue3だとうまく動かない…これ↓
See the Pen Untitled by Hidenori Himeno (@hidenori-himeno) on CodePen.
トグルボタンで表示/非表示を切り替えるんですけど、leaveのopacity: 1→0はふわっと消えますけど、enterのopacity: 0→1が動かないんですよね。
enterはいきなりopacity: 1になってしまう…分からん、誰か教えて下さい…。
追記）結局、クラスつけてcssのアニメーションでふわっと表示/非表示するようにしました。
See the Pen vue-fadein by Hidenori Himeno (@hidenori-himeno) on CodePen.
非表示は一瞬ですけど、表示の際はふわっと出るようになってます。testクラスでアニメーション付加ですね、aaaaaaのところ。
※2022/4/4追記：
アニメーション付加しなくても、vueのみでふわっと表示/非表示できるようになりました。
原因はenterのtoを記載したのがダメだったようで、acitveの結果がtoとして固定されるようです。
See the Pen Untitled by Hidenori Himeno (@hidenori-himeno) on CodePen.
