
IEでVue.jsを使った時に発生するエラーへの対応
CDNを使って直接ウェブサイトの一部にVue.jsを使う場合には、Babelなどのトランスパイルなどをしないため、そのままIEで確認してみるとエラーが発生するケースもあります。クライアントワークで実際に直面したので備忘録として残しておきたいと思います。
まずは下記のようなエラーが発生しました。「:」が抜けていると怒られているようです。
実際に該当部分を確認してみると、ここではmethods内で定義している関数でしたが、特におかしなところは無いはず、、
よく考えてみると、省略した記述がいけないのではと思い、下記のように、オブジェクトのキーと無名関数の形に直してみるとあっけなく解決しました。
識別子と表示され、何のことかなと思っていると、よくよく考えたらアロー関数で記述していることに気づき、こちらもオブジェクトのキーと無名関数の形に直してあげることで解決しました。
実際に該当部分を確認してみると、ここではmethods内で定義している関数でしたが、特におかしなところは無いはず、、
よく考えてみると、省略した記述がいけないのではと思い、下記のように、オブジェクトのキーと無名関数の形に直してみるとあっけなく解決しました。
// NG
methods: {
exampleFunction(argument) {
// 処理
}
......
}
↓↓↓
// OK
methods: {
exampleFunction: function(argument) {
// 処理
}
......
}
もう一点、こちらも同じく定義している関数のところで発生したエラーですが、「識別子がない」と怒られているようです。
識別子と表示され、何のことかなと思っていると、よくよく考えたらアロー関数で記述していることに気づき、こちらもオブジェクトのキーと無名関数の形に直してあげることで解決しました。
// NG
methods: {
exampleFunction: function((argument) => {
// 処理
})
......
}
↓↓↓
// OK
methods: {
exampleFunction: function(argument) {
// 処理
}
......
}
そもそもIEの場合にはES6が対応していないこともあり、Vue.jsでよく使っている通常の表記では対応できないケースも多々あるので注意が必要ですね。まだまだ実際の現場ではIEへの対応は必須な要件も多いかと思いますので、Vue.jsを使う場合には覚えておきたいですね。categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)