[英]VueJS Component not rendering in IE11
我有一个像这样的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错误,否则在控制台中看不到任何错误。
最初,我认为这可能是IE中SVG的问题,但我又用静态SVG制作了另一笔笔 ,并且它正在渲染。
如果检查IE11中的元素,您只会看到<statistic></statistic>
标记-它们不会被呈现。
我使用的组件不支持IE吗?
我在这里看到Vue对象中的错误:
Vue.component('statistic-animation', {
props: ['amount', 'postfix','scale', 'className', 'accuracy', 'prefix','fill'],
data(){ // ERROR!
return {
current : this.amount,
}
},
....
IE 11不支持对象中的短方法定义语法- 源
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.