版本
2.5.13
复现链接
https://jsfiddle.net/SunnyLyu/ntoboxev/
复现步骤
- 对于无法在jsfiddle中使用.vue文件定义的情况,请按照以下步骤操作。
- 创建一个如下所示的文本区域组件:
export default {
props: {
value: {
type: String
}
},
render: function(h) {
var _this = this;
return h('textarea', {
'on': {
'input': function(e){
_this.$emit('update:value', e.target.value);
}
}
})
}
};
- 将此代码导入到.vue文件中并将其用作Vue组件:
- 运行所有这些代码
预期结果是什么?
在文本区域中输入'1'一次,字符'1'会出现在文本区域中,这是在IE11中的预期结果。
实际发生的情况是什么?
在文本区域中输入'1'一次,同时出现两个字符'11',这是在IE11中的实际结果。
- 在HTML中直接使用组件定义,无论是在IE还是Chrome中都能正常工作(就像在jsfiddle中运行的示例一样)。
- 一旦在.vue文件中使用定义,在IE11编译后会出现错误,但在Safari和Chrome中仍然可以正常工作。
6条答案
按热度按时间wooyq4lh1#
有任何进展吗?
mm5n2pyu2#
你好,@Fuji-sunny。我无法在IE 11下复现你的问题,以下是代码:
如果你仍然遇到这个问题,我建议你打开一个github复现仓库,上传有问题的代码,并将仓库地址反馈给我们。
ep6jt1vc3#
我仍然面临这个问题,所以我在这里推送了复现代码:
https://github.com/Fuji-sunny/vuerepo
我的IE版本是11.0.9600.18738,希望这个复现能有所帮助。
v1l68za44#
@Fuji-sunny刚刚进行了一些调查,发现只需将
[this.value]
替换为this.value
即可使其正常工作。这是vue的补丁机制导致的,但根本原因是Chrome和IE11中不同的行为,请参阅此fiddle: https://jsfiddle.net/9fshvom1/2/。我不确定我们是否需要对其进行改进,或者它只是一个wontfix...😂
yhived7q5#
非常感谢您的调查!在这个场景中,我想使用您的解决方案。希望这种情况不会发生在其他情况下。
qjp7pelc6#
很遗憾,这里又出现了一个问题。
你的解决方案在向textarea中添加文本时有效,但当按下退格键以删除文本直到textarea中没有文本时,IE11会抛出一个错误,提示“参数无效”。
我查看了Vue的代码,当将[this.value]传递给createElement时,不会引起这个错误。当将this.value传递给createElement时,它会进入setTextContent方法。而node.wholeText与此错误有关。
还有其他解决方案或建议吗?
附:相同的复现问题:https://github.com/Fuji-sunny/vuerepo