IEでおきるバグの小さいサンプル
どんなバグか
input type="text"のplaceholderに日本語を設定しておいて
v-ifで画面表示直後(mounted中)に
- インプットテキストを消えるようにしておく
- v-modelに設定されている変数に値を設定する
こうしておくと、IE以外のブラウザでは変数に値が設定されているが、 IEだけ値がリセットされ、空白で上書きされてしまう。
サンプルコード
Nuxtのプロジェクトを作ったときにpagesの中に入っているサンプルの.vueファイルをバグが起きるように書き換える
<template> <section class="section"> <h2 class="title is-3 has-text-grey"> バグ再現コンポーネント <b-icon icon="rocket" size="is-large" /> </h2> <div v-if="isView">これはラベルです。画面表示するとこっちが見えるようになります。{{inputText}}</div> <div v-else>これはテキストインプットです。mounted中にv-elseに来ないようになります <input type="text" v-model="inputText" placeholder="プレースホルダー文言です。ここをaaとかに書き換えると再現しない"/> </div> <button @click="change">ラベルとテキストの表示を切り替える確認用ボタン</button> </section> </template> <script> export default { data() { return { inputText: '', beVisible: false } }, mounted() { this.inputText = 'IEだけこの変数がリセットされ空白になる' this.beVisible = true }, methods: { change(e) { this.beVisible = !this.beVisible } }, computed: { isView() { return this.beVisible } } } </script>
どうなおすのか
placeholderを消す
placeholderに日本語を使わない?
テキストインプットがmounted前から表示されないようにする(サンプルでいうとbeVisibleの初期値をtrueにする)
他にもググるといくつか出てくる
vueのissuesのやりとりに似たようなものも出てくるがvue2.6.10でも再現するのは確認済み