Vue.js Multiple definitions of a property not allowed in strict mode

Question

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.

Answer 1

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.

Answer 2

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.