SHOSI
@SHOSI (し しょ)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

vue-js-modalで作成したモーダル内のSelectタグのv-modelとchangeイベントが動作しない

vue.jsのvue-js-modalでモーダルウィンドウを作成し、
modalタグの中にselectタグでリストボックスがあり、
selectタグに、v-modelとv-on:changeを設定していますが、
リストボックスの値を選択しても、
v-modelで指定している変数に反映されません。
changeイベントも発生しません。

selectタグのv-onダブルクリックイベントは発生します。
selectタグ内のoptionタグは、正常にvue.jsで動的に動いています。
また、modalタグをdivタグに変更すると、
v-modelとv-on:changeが正常に動作します。

リストボックスの選択イベントが正常に発生していないように思えます。

正常に動作するようにしたいのですが、
何か、調査する観点など、ございましたら、ご教示願います。

(追記)
本事象は、Chromeと新Edge(Chrome版)で発生しますが、
IE11と旧Edgeでは発生しませんでした。
また、modalタグの外側にselectタグを移動しても発生しませんでした。
Chromeでmodalタグの中でだけ発生するようです。

(追記2)
すいません、質問内容にタグ埋め込んでしまっていて、文字がいろいろ消えていたので、修正しました。
selectタグにsizeを指定して、リストボックスにすると、本事象が発生するが、
sizeを指定せずにコンボボックスにすると、発生しません。

0

1Answer

最初は「v-modelと@change同時に指定してるとかでは?」と思いましたが、
「タグを変更すると動く」という部分が不可解ですね。

一度公式のソース例をコピーした上で
動作を確認した方が良いかもしれません。

0Like

Comments

  1. @SHOSI

    Questioner

    すいません、言葉足らずでした。
    最初は、v-modelだけを使っていて、動かなかったので、
    changeイベントで、代用できないかと思って、changeイベントも追加したけど、これも動きませんでした。
    ダブルクリックやv-bindは正常に動くのですが、、、
    モーダル部品に、選択イベントが阻害されているように見えます。
    また、それ以外のvue.jsは正常に動いています。
  2. @SHOSI

    Questioner

    ご回答ありがとうございます。

Your answer might help someone💌