drewjbartlett / vue-switches

An on/off switch component for Vue.js with theme support.
http://drewjbartlett.com/demos/vue-switches/
209 stars 41 forks source link

Support for IE11 (ES5) #23

Open Timo-DK opened 6 years ago

Timo-DK commented 6 years ago

Hello,

I've implemented vue-switches in a software solution, and concluded that vue-switches is not (yet) supported for IE11.

At https://github.com/drewjbartlett/vue-switches/blob/master/src/switches.vue#L58 IE11 is complaining about the mounted function. There are some other places where this happens.

The cause for this is because in ES6 the shorthand function for object initializers is introduced.

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

The VueJS documentation is suggesting to use the following style:

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

Reference: https://vuejs.org/v2/api/#mounted

Transcompiling the node_modules directory is not a really effecient option.

Option 1 - Manual "downgrade" the syntax to ES5

It would be fairly simple to implement this and support IE11 without the need of a transcompiler.

If there aren't any plans to fix this, I could fix it myself and send a PR.

Pros:

Cons:

Option 2 - Transcompile the source

Transcompile the source to ES5 before distribubtion (eg. npm).

Pros:

Cons:

Roye7777777 commented 4 years ago

A primary issue is that on rule 58 in switches.vue, the syntax mounted () { is not supported in IE, thus causing all other layout to break. Adjusting that (as mentioned above) to mounted: function () { would fix it.