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でも再現するのは確認済み