Vue.js - Dynamic inputs breaking in IE11

Question

I'm getting an error when trying to create a dynamic input in Vue when attempting to view my app in IE. The page doesn't load and I get a "Multiple definitions of a property not allowed in strict mode."

The input has both a v-model and :value attribute and it makes sense that for most situations these conflicts however for multiple checkboxes and radio buttons the attribute is necessary to determine what the assigned value to the v-model should be.

The Vue docs even show this is the proper way to work with checkbox arrays, however they don't use a dynamic value property. Because of the way this component is used, the value needs to be dynamic.

Here is what the code looks like abstractly:

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

Is there any way around this error in IE? It works perfectly fine in all other browsers. Thanks!

score 3 · Answer 1 · answered Jan 31 '20 at 07:13

This error is indeed caused by v-model and :value directives on the same element. The resulting JS Code in IE is something like {value: 'value1', value: 'value2'}

v-model should handle some tags differently. For checkboxes it should generate a checked prop instead of a value prop. But in IE the check for this special case seems to be buggy. It only works if you set the input type literally and not by an expression. For me it worked this way:

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

and NOT:

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

You are a freakin' genius! This was super helpful. – Hustensaft May 04 '20 at 15:42 — Hustensaft, May 04 '20 at 15:42

score 2 · Answer 2 · answered May 24 '19 at 02:57

"Multiple definitions of a property not allowed in strict mode."

The issue usually occurs when you set duplicate properties in your code.

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

The problem perhaps seems to be the :value="value" binding that may have conflict with v-model vlue.

And I would like to ask which line does your code show the error message?

Here is a working code that may be helpful to your rquirement: 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>

And here is a reference link that may also be helpfu to you: Vue.js Multiple definitions of a property not allowed in strict mode

score 1 · Answer 3 · edited Jul 16 '22 at 02:01

v-model on an input does the same thing as this:

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

So if you use both v-model and :value, you get the value attribute twice which I suspect is the source of the error you get.

To address this issue, starting in Vue 2.2.0, you can use the model option of a component to fix this situation:

Allows a custom component to customize the prop and event used when it’s used with v-model. By default, v-model on a component uses value as the prop and input as the event, but some input types such as checkboxes and radio buttons may want to use the value prop for a different purpose. Using the model option can avoid the conflict in such cases.

Example:

// 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>

Since you say that what you posted is what the "code looks like abstractly", it's hard to give an exact answer, but I think this will help. If not, please post a minimal working example showing your bug.

Also, I tested the multiple checkbox example you referenced in IE11 and it works fine.

Vue.js - Dynamic inputs breaking in IE11

3 Answers3