7

Good day.

We are building our application using Vuejs/Vuex/vue-router using the https://github.com/vuejs/vue-hackernews-2.0

When building and viewing our application using IE11 we get a SCRIPT1046: Multiple definitions of a property not allowed in strict mode and it references the compiled app.[#hash].js file. I have tracked the duplicate property to the following in the component:

<div class="form-group form-group-list">
    <label aria-labelledby="Shopping preference">Shopping preference</label>
    <ul class="inline">
        <li>
            <label for="users__secondary_signup__gender__female" aria-labelledby="Gender female">
                    <span class="enhanced-radio" :class="{ 'selected': selectedGender === 'FEMALE' }">
                        <input id="users__secondary_signup__gender__female" class="enhance-radio"
                                :checked="selectedGender === 'FEMALE'" name="gender"
                                type="radio" value="FEMALE" v-model="selectedGender">
                    </span> Female
            </label>
        </li>
        <li>
            <label for="users__secondary_signup__gender__male" aria-labelledby="Gender male">
                    <span class="enhanced-radio" :class="{ 'selected': selectedGender === 'MALE' }">
                        <input id="users__secondary_signup__gender__male" class="enhance-radio"
                                :checked="selectedGender === 'MALE'" name="gender"
                                type="radio" value="MALE" v-model="selectedGender">
                    </span> Male
            </label>
        </li>
    </ul>
</div>

The only reference in the compiled file to these are: 

domProps: {
    checked: "MALE" === t.selectedGender,
    checked: t._q(t.selectedGender, "MALE")
},
and
domProps: {
    checked: "FEMALE" === t.selectedGender,
    checked: t._q(t.selectedGender, "FEMALE")
},

I cannot find anywhere else in the compiled file where there might be duplicated properties in an object. Has anyone seen this? Are we doing something wrong in the component for it to be doing this?

Thank you, any assistance is appreciated.

Wilco
  • 191
  • 3
  • 12
  • You have most likely added a prop with the same key twice in your code. This issue comes when you have two keys named the same. Had the [same issue](https://stackoverflow.com/a/47198931/6178832) some time ago – Sølve T. May 24 '18 at 17:06

2 Answers2

10

You can't use v-model and :checked at the same time. When you added v-model="selectedGender", you provided it a way to determine the checked status based on the value of selectedGender. That caused it to create this code:

checked: t._q(t.selectedGender, "MALE")

When you also added :check="selectedGender === 'FEMALE'" you caused it to add this other way to set the checked status:

checked: "FEMALE" === t.selectedGender,

You can't have both. Just remove the :checked= to fix this.

Charles
  • 1,084
  • 11
  • 14
  • I did not know that v-model and :checked could not live in the same tag. This correctly solved the problem with IE11 for me – belvederef Oct 19 '18 at 10:47
  • I didn't either until I did it myself and then spent quite a bit of time figuring out what was going on. – Charles Oct 20 '18 at 14:01
0

To build on @Charles answer, this is true of other duplicate properties as well. For example you can't have :value="myProperty" and value="true" declared as it will create similar code mentioned in Charles answer.

Simply removing the duplicate properties fixes these kinds of issues.

Billy Williams
  • 1