当尝试在IE中查看我的应用程序时,在Vue中创建动态输入时出现错误。该页面无法加载,并且显示“在严格模式下不允许属性的多个定义。”
输入具有v-model和:value属性,在大多数情况下这些冲突是有意义的,但是对于多个复选框和单选按钮,该属性对于确定应为v-model分配的值是必需的。
The Vue docs甚至显示这是使用复选框数组的正确方法,但是它们不使用动态值属性。由于使用了此组件的方式,该值必须是动态的。
这是抽象的代码:
<input
v-model="questionAnswer"
:disabled="readOnly"
:type="type"
:value="value"
>
在IE中是否有解决此错误的方法?它在所有其他浏览器中都可以正常工作。谢谢!
答案 0 :(得分:3)
此错误确实是由同一元素上的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" />
答案 1 :(得分:0)
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模型一起使用的道具和事件。默认情况下,组件上的v-model将值用作属性,将输入作为事件,但是某些输入类型(例如复选框和单选按钮)可能希望将值属性用于其他目的。在这种情况下,使用模型选项可以避免冲突。
示例:
// 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中引用的多个复选框示例,并且工作正常。
答案 2 :(得分:0)
“在严格模式下不允许对属性进行多个定义。”
当您在代码中设置重复属性时,通常会发生此问题。
v-model将忽略在任何表单元素上找到的初始值,已检查或选定的属性。它将始终将Vue实例数据视为事实的来源。您应该在JavaScript端的组件的data选项中声明初始值。
问题似乎可能是:value =“ value”绑定,可能与v模型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