Vue.js - IE11 中的动态输入中断答案

【问题标题】：Vue.js - Dynamic inputs breaking in IE11Vue.js - IE11 中的动态输入中断
【发布时间】：2019-10-09 12:02:28
【问题描述】：

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

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

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

下面是代码的抽象样子：

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

在 IE 中有什么方法可以解决这个错误吗？它在所有其他浏览器中都可以正常工作。谢谢！

【问题讨论】：

标签： internet-explorer vue.js internet-explorer-11 checkboxlist strict-mode

【解决方案1】：

这个错误确实是由同一元素上的v-model 和:value 指令引起的。在 IE 中生成的 JS 代码类似于 {value: 'value1', value: 'value2'}

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

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

而不是：

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

【讨论】：

你真是个天才！这非常有帮助。

【解决方案2】：

“在严格模式下不允许对一个属性进行多个定义。”

当您在代码中设置重复属性时，通常会出现此问题。

v-model 将忽略在任何表单元素上找到的初始值、选中或选定属性。它将始终将 Vue 实例数据视为事实来源。您应该在 JavaScript 端声明初始值，在组件的 data 选项中。

问题可能似乎是 :value="value" 绑定可能与 v-model vlue 冲突。

我想问一下你的代码在哪一行显示错误信息？

这是一个可能对您的要求有帮助的工作代码：http://jsfiddle.net/4hprbzw9/

<div id="demo">
    <div v-for="checkedvalue in NamesList">
        <input type="checkbox" :value="checkedvalue.valueselect" v-model="checkedNames" @click="check($event)" > {{checkedvalue.valueselect}}
    </div>
    <span>Checked names:{{ checkedNames }}</span>
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            checkedNames: [],
            NamesList: [{
                valueselect: 'aaa'
            }, {
                valueselect: 'bbb'
            }, {
                valueselect: 'ccc'
            }]
        },
        methods: {
            check: function (e) {
                if (e.target.checked) {
                    console.log(e.target.value)
                }
            }
        }
    })
</script>

这里有一个参考链接，可能对你也有帮助：Vue.js Multiple definitions of a property not allowed in strict mode

【讨论】：

【解决方案3】：

v-model input does the same thing as this:

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

所以如果你同时使用v-model 和:value，你会得到两次 value 属性，我怀疑这是你得到错误的根源。

为了解决这个问题，从 Vue 2.2.0 开始，你可以使用组件的model option 来解决这个问题：

允许自定义组件自定义与 v-model 一起使用时使用的道具和事件。默认情况下，组件上的 v-model 使用 value 作为 prop 并将 input 作为 event，但是某些输入类型（例如复选框和单选按钮）可能希望将 value prop 用于不同的目的。使用模型选项可以避免这种情况下的冲突。

例子：

// Component
Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

// Template
<my-checkbox v-model="foo" value="some value"></my-checkbox>

// Is equivalent to
<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

由于您说您发布的是“代码看起来像抽象的样子”，因此很难给出确切的答案，但我认为这会有所帮助。如果没有，请发布一个显示您的错误的最小工作示例。

另外，我测试了您在 IE11 中引用的多个复选框示例，它工作正常。

【讨论】：