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