clickでv-modelが反映されないんですけど…？
こうした悩みを解決します。
立科プログラミングではサイトの新規構築、既存サイトの機能追加・修正、動作不具合解析など行っております。
こういう見た目にしたい、この機能を少し直したいなどお困りのことがあればお問い合わせください！
v-modelとは
v-modelは、v-bindとv-on:inputが合わさったもので、都度イベント発生することで処理が実行されるものです。
公式の説明はこちら→公式を見る
要するにv-modelは変更が生じた瞬間に直ちにイベント発生してv-bindでつなげた変数に入力するものです。
そのため、v-on:clickやv-on:changeなどイベント発生させる処理とv-modelを共存させるとイベントが競合してしまう事態となってしまいます。
clickとv-modelを競合させたところ実動作としてはclickイベントが優先実行され、v-modelは処理されませんでした。
優先度はどこに記載があるかご存じの方はご教示いただけると幸いです！
画像をポップアップ（モーダル）する
先に完成サンプルを示します。画像をクリックするとポップアップするかと思います。
画像とポップアップ画像を作成し、画像をクリックするとv-show制御でポップアップ画像の表示/非表示を切り替えています。
See the Pen vuetest_モーダル（ポップアップ） by Hidenori Himeno (@hidenori-himeno) on CodePen.
実際に実装したページはこちら
立科町で名刺・ショップカード・チラシを依頼するなら立プロ！
やりたかったこと
画像クリック時にポップアップもそれに連動させたいと思い、v-modelで画像URLを指定しクリックイベントでv-modelの変数を受け取ろうと考えました。
しかしデバッグでv-modelの応答を確認したところうまく反映されていません…そこでv-modelが何なのか調べたところ、上述のとおりイベントだと分かったのです。
それで結局どうするか考えた結果、v-modelをやめてclickイベントでURLを引数として与えることで解決しました。
HTMLのimgに同じURLが２つ入っていて、どうも他にうまいやり方があるような気もしますが、とりあえずこれでポップアップができました。
また、このプログラムを作成するにあたり下記記事が大変参考になりました。コピペさせていただきました。ありがとうございます。
vue.js モーダルウィンドウ実装でコンポーネント理解
まとめ
v-modelは、v-bindとv-on:inputが合わさったもので、都度イベント発生することで処理が実行される
vueでポップアップさせることができた
