internet-explorer - Vue.js - IE11 中的动态输入中断

Question

尝试在 IE 中查看我的应用程序时尝试在 Vue 中创建动态输入时遇到错误。该页面无法加载，并且我收到“严格模式下不允许属性的多个定义。”

输入同时具有 v-model 和 :value 属性，在大多数情况下，这些冲突是有意义的，但是对于多个复选框和单选按钮，必须使用该属性来确定为 v-model 分配的值应该是什么。

The Vue docs甚至表明这是使用复选框数组的正确方法，但是它们不使用动态值属性。由于该组件的使用方式，该值需要是动态的。

代码抽象如下:

<input
  v-model="questionAnswer"
  :disabled="readOnly"
  :type="type"
  :value="value"
>

有什么办法可以解决 IE 中的此错误吗？它在所有其他浏览器中工作得很好。谢谢!

Answer 1

此错误确实是由同一元素上的 v-model 和 :value 指令引起的。 IE 中生成的 JS 代码类似于{值:'值1'，值:'值2'}

v-model 应该以不同的方式处理某些标签。对于复选框，它应该生成一个 checked 属性而不是 value 属性。但在 IE 中，对这种特殊情况的检查似乎有问题。仅当您按字面设置输入类型而不是通过表达式时，它才有效。对我来说，它是这样工作的:

<input type="checkbox" :value="value" v-model="model" />

而不是:

<input :type="type" :value="value" v-model="model" />