vue.js-动态输入中断IE11



在尝试在IE中查看我的应用程序时,我在尝试在VUE中创建动态输入时会遇到错误。该页面没有加载,我会在严格模式下获得不允许的属性的"多个定义"。

输入既具有V模型又有:值属性,并且在大多数情况下,对于多个复选框和无线电按钮,属性对于确定对V模型的分配值是什么,这是有道理的。

VUE文档甚至显示这是使用复选框数组的正确方法,但是它们不使用动态值属性。由于使用此组件的方式,该值需要动态。

这是代码抽象的样子:

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

在IE中有什么办法?它在所有其他浏览器中都可以正常工作。谢谢!

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

v-model应以不同的方式处理一些标签。对于复选框,它应该生成checked Prop而不是value Prop。但是在IE中,此特殊情况的检查似乎是越来越大的。它仅在您以字面意义而不是通过表达式设置输入类型时起作用。对我来说,它是这样工作的:

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

而不是:

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

"在严格模式下不允许的属性的多个定义。"

当您在代码中设置重复属性时,通常会发生问题。

v-Model将忽略在任何形式元素上找到的初始值,检查或选定的属性。它将始终将VUE实例数据视为真理的来源。您应该在组件的数据选项内声明JavaScript端的初始值。

问题似乎是: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在严格模式下不允许属性的多个定义

v-model上的 CC_7与此相同的事情:

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

因此,如果您同时使用v-model:value,则我怀疑两次获得值属性是您遇到的错误的来源。

要解决此问题,从VUE 2.2.0开始,您可以使用组件的model选项来解决以下情况:

允许自定义组件自定义与V模型一起使用时使用的道具和事件。默认情况下,组件上的V模型将值用作事件的Prop和输入,但是某些输入类型(例如复选框和无线电按钮(可能希望将值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中引用的多个复选框示例,并且效果很好。

最新更新