在使用render函数在.vue文件中创建时,双值出现在textarea中,

pkwftd7m  于 10个月前  发布在  其他
关注(0)|答案(6)|浏览(88)

版本

2.5.13

复现链接

https://jsfiddle.net/SunnyLyu/ntoboxev/

复现步骤

  1. 对于无法在jsfiddle中使用.vue文件定义的情况,请按照以下步骤操作。
  2. 创建一个如下所示的文本区域组件:
  1. export default {
  2. props: {
  3. value: {
  4. type: String
  5. }
  6. },
  7. render: function(h) {
  8. var _this = this;
  9. return h('textarea', {
  10. 'on': {
  11. 'input': function(e){
  12. _this.$emit('update:value', e.target.value);
  13. }
  14. }
  15. })
  16. }
  17. };
  1. 将此代码导入到.vue文件中并将其用作Vue组件:
  2. 运行所有这些代码

预期结果是什么?

在文本区域中输入'1'一次,字符'1'会出现在文本区域中,这是在IE11中的预期结果。

实际发生的情况是什么?

在文本区域中输入'1'一次,同时出现两个字符'11',这是在IE11中的实际结果。

  1. 在HTML中直接使用组件定义,无论是在IE还是Chrome中都能正常工作(就像在jsfiddle中运行的示例一样)。
  2. 一旦在.vue文件中使用定义,在IE11编译后会出现错误,但在Safari和Chrome中仍然可以正常工作。
wooyq4lh

wooyq4lh1#

有任何进展吗?

mm5n2pyu

mm5n2pyu2#

你好,@Fuji-sunny。我无法在IE 11下复现你的问题,以下是代码:

  1. <script>
  2. export default {
  3. props: {
  4. value: {
  5. type: String
  6. }
  7. },
  8. render(h) {
  9. return h('textarea', {
  10. on: {
  11. input: e => {
  12. this.$emit('update:value', e.target.value)
  13. }
  14. }
  15. })
  16. }
  17. }
  18. </script>
  19. <style>
  20. </style>

如果你仍然遇到这个问题,我建议你打开一个github复现仓库,上传有问题的代码,并将仓库地址反馈给我们。

展开查看全部
ep6jt1vc

ep6jt1vc3#

我仍然面临这个问题,所以我在这里推送了复现代码:
https://github.com/Fuji-sunny/vuerepo
我的IE版本是11.0.9600.18738,希望这个复现能有所帮助。

v1l68za4

v1l68za44#

@Fuji-sunny刚刚进行了一些调查,发现只需将 [this.value] 替换为 this.value

  1. render(h) {
  2. return h('textarea', {
  3. on: {
  4. input: e => {
  5. this.$emit("update:value", e.target.value);
  6. }
  7. },
  8. }, this.value);
  9. }

即可使其正常工作。这是vue的补丁机制导致的,但根本原因是Chrome和IE11中不同的行为,请参阅此fiddle: https://jsfiddle.net/9fshvom1/2/。我不确定我们是否需要对其进行改进,或者它只是一个wontfix...😂

yhived7q

yhived7q5#

非常感谢您的调查!在这个场景中,我想使用您的解决方案。希望这种情况不会发生在其他情况下。

qjp7pelc

qjp7pelc6#

很遗憾,这里又出现了一个问题。
你的解决方案在向textarea中添加文本时有效,但当按下退格键以删除文本直到textarea中没有文本时,IE11会抛出一个错误,提示“参数无效”。
我查看了Vue的代码,当将[this.value]传递给createElement时,不会引起这个错误。当将this.value传递给createElement时,它会进入setTextContent方法。而node.wholeText与此错误有关。
还有其他解决方案或建议吗?
附:相同的复现问题:https://github.com/Fuji-sunny/vuerepo

相关问题