JavaScript
Ajax
IE11
vue.js
axios

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

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で作ってみようと思います。