Компонент VueJS не отображается в IE11

Question

У меня есть небольшое приложение Vue, вот так:

<div id="app">
  <div class="row">
    <div>
      <statistic
        class-name="stat-1"
        :amount="amount"
        :postfix="postfix"
        :prefix="prefix"
        :scale="scale"
        :accuracy="accuracy"></statistic>
    </div>
    <div><!-- controls --></div>
  </div>
</div>

JS:

Vue.component('statistic', {
  props: ['amount', 'postfix','scale', 'className', 'accuracy', 'prefix','fill'],

  /* config here */

  template:`<div class="animated-statistic" :class="className">
    <svg class="animated-statistic--graphic"  width="200" height="200" viewBox="0 0 200 200">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(249,232,154);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(229,107,233);stop-opacity:1" />
        </linearGradient>
      </defs>
      <circle cx="100" cy="100" :r="radius" fill="url(#grad1)"></circle>
    </svg>
    <div class="animated-statistic--text" v-text="value"></div>
  </div>`
});

Это хорошо работает - ссылка на рабочий Codepen

Однако, если вы перейдете по той же ссылке в IE11, там будет пустая область, где должен быть компонент.Если я не использую IE неправильно, я не вижу никаких ошибок в консоли.

Сначала я подумал, что это может быть проблема с SVG в IE, но я сделал другую копию пера со статическим SVG, и он выполняет рендеринг.

Если вы просматриваете элемент в IE11, вы просто видите тег <statistic></statistic> - они не отображаются.

Я использую что-то, что IE не поддерживает с этим компонентом?

Answer 1

Я вижу ошибку в объекте Vue здесь:

Vue.component('statistic-animation', {
  props: ['amount', 'postfix','scale', 'className', 'accuracy', 'prefix','fill'],
  data(){   // ERROR!
    return {
       current : this.amount,
    }
  },
 ....

IE 11 не поддерживает краткий синтаксис определения метода в объектах - source