Vueの実装時につまずいたことまとめ

うまく動かんやん…

こうした悩みと解決方法を示します。

ラジオボタンを2回押さないと反映されない

ラジオボタンのイベント発生には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の値を取り出せない