internet-explorer - VueJS 组件未在 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 不支持对象中的短方法定义语法 -源代码
推荐阅读
- python - 找到网格对角线的最佳方法是什么?
- c# - 如何使用 lambda 表达式访问正确的数据类型?
- visual-studio-code - 在 VSCodium 上自动更新手动安装的扩展
- codeigniter - 在 cpanel 中控制网站部署的有效方法
- python-3.x - 当输出在当前目录中时,gpg 加密权限被拒绝
- python - 如何使用 Django 处理生产中的冻结库?
- python - 为什么 QMessageBox.exec() 不阻塞我的线程
- android - 如何从 Android 9 取消配对蓝牙经典设备?
- decision-tree - 对决策树进行修剪、约束还是两者的结合?
- r - 根据另一列 R 的组分配行的值