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:inputが合わさったもので、都度イベント発生することで処理が実行されている。(参照:公式サイト
要するにv-modelは変更が生じた瞬間に直ちにイベント発生してv-bindでつなげた変数に反映されるものと考える。
clickとv-modelを共存させるとイベントが競合してしまう事態となっており、実動作としてはclickイベントが優先実行された。

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

vueでポップアップ作ろうとv-on:clickとv-modelを共用させたらうまく処理されなかった件

CSSを動的に変更するにはどうすればよいか

HTML部にv-bind結合したstyleを記述し、そのstyle内に変数を入れてやります。

詳細は↓
vueで要素のスタイルを動的に変更するにはどうすればよいのか解説します

トランジションがうまくいかない

表示の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.

制作依頼があればどうぞ

制作依頼や不明点の問合せは下記フォームをご利用ください。

    必須 お名前
    任意 電話番号
    必須 メールアドレス
    任意問合わせ内容

    タイトルとURLをコピーしました