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の値を取り出せない

画像をクリックしたらポップアップ(モーダル)させる処理を入れようと、ポップアップ画像にv-model経由でURL入れようとしたら入らない。
そもそも、v-modelは、v-bindとv-onが合わさったもので、都度イベント発生することで処理が実行されている。(参照:公式サイト
要するにv-modelは変更が生じた瞬間に直ちにイベント発生してv-bindでつなげた変数に反映されるものと考える。
clickとv-modelを共存させるとイベントが競合してしまう事態となっており、実動作としてはclickイベントが優先実行された。

結局URLの受け渡しは、引数として関数で受けて変数格納することで対応した。