[英]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.