BETA

【Vue.js】IE11でひっかかるエラー

投稿日:2018-10-15
最終更新:2018-10-24
※この記事は外部サイト(https://qiita.com/kaoriSG/items/09158675f8...)からのクロス投稿です

Vue.jsでフロントエンドを開発した際に、IE11チェックひっかかったエラーについでの備忘録です。 Vue.jsと書いていますが、Javascript全般に言えると思います。

SCRIPT 1003: Expected ':'

Vueコンポーネント内、主にライフサイクルフック周りで散見。

要は

var = new Vue({
  el: '#hoge',
  methods: {
     method-hoge(){ console.log('出力1')  },
     method-fuga(){ console.log('出力2')  },
  },
  created(){
     this.method-hoge()
  }
})

var = new Vue({
  el: '#hoge',
  methods: {
     method-hoge: function(){ console.log('出力1')  },
     method-fuga: function(){ console.log('出力2')  },
  },
  created: function(){
     this.method-hoge()
  }
})

created(  ){ ... } と簡略化せず created: function(  ){ ... } 丁寧に書いてあげればいい。 癖づけておけば問題ないです。

var object = {
  status: 1,
  data
}

これも引っかかるので↓↓↓

var object = {
  status: 1,
  data: data
}

これはわかりますけどね。 私はなかったけど、調べていたらひっかかる人は引っかかるらしい。

SCRIPT1002: Syntax error

優しくないエラー文。 該当箇所をみてあげればわかりますが

getData: function(){
      var emit_code = 'GET_AJAX_COMPLETE'
      store.get_ajax(URL, 'get', emit_code)
      store.$on(emit_code, () => {
        var res = store.get_data('get')
               this.data = res
      })
    },

↓↓↓

getData: function(){
      var emit_code = 'GET_AJAX_COMPLETE'
            var p = this
      store.get_ajax(URL, 'get', emit_code)
      store.$on(emit_code, function(){
        var res = store.get_data('get')
               p.data = res
      })
    },

色々端折って書いていますが、要は store.$on(emit_code, (  ) => {...}) → store.$on(emit_code, function (  ){...}) ということ。 SCRIPT 1003 と同じようなものです。丁寧に書いてあげれば問題ないです。

ただし、 this が書き換わるので変数にぶち込んで置く必要があります。 実際のコードで this を使いまくっていたので、後から気づいて直す時に心底面倒な修正作業になりました。

error in created hook referenceerror 'promise' is undefined (おまけ)

毎回忘れてるので戒め。

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>

でもこれくらい

小さいWEBアプリケーションとはいえ、エラーが出たのはここくらい。 IEでも綺麗に動くので、Vue.jsは非常に使いやすいです。双方向バインディングができるし。 今回はCDNでちゃっと作ったので、もう少し大きな案件がきたらwebpackで作ってみようと思います。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

技術メモなど。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!