LoginSignup
7
6

More than 3 years have passed since last update.

[Vue]v-ifに特定のメソッドを連動させたい場合、v-onがとても手軽な件

Posted at

いきなりサンプル

See the Pen [Vue]v-ifのメソッドを連動させる by riotam (@riotam4) on CodePen.

サンプルの使い方

入力欄に「b」「y」「r」のいずれかを入力したら、下の文字が非同期的に変わります。
「r」を入力した場合だけ、メソッドが発火してalertがでます。

ポイント

当初は、dataのstateをwatchフックで監視して、変更のたびにif分岐させる必要があるかと考えていました。
しかし、サンプルの通り、v-ifのあるタグ内にそのままv-on="メソッド名"とすれば、v-ifがtrueのときに勝手に発火してくれます。

最後に

v-ifとv-onの使い方として、あまりいい方法ではないのかもしれませんが、とりあえず方法との1つとして共有させて頂きます。
何かご意見等ありましたら、ご連絡いただけると嬉しいです。

最後まで、ありがとうございました。

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6