owned mediaウェブ制作に役立つコンテンツを発信中!

IEでVue.jsを使った時に発生するエラーへの対応

CDNを使って直接ウェブサイトの一部にVue.jsを使う場合には、Babelなどのトランスパイルなどをしないため、そのままIEで確認してみるとエラーが発生するケースもあります。クライアントワークで実際に直面したので備忘録として残しておきたいと思います。   まずは下記のようなエラーが発生しました。「:」が抜けていると怒られているようです。   実際に該当部分を確認してみると、ここでは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を使う場合には覚えておきたいですね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram