programing

Vue.js 엄밀한 모드에서는 허용되지 않는 속성의 다중 정의

goodjava 2022. 11. 30. 21:15

Vue.js 엄밀한 모드에서는 허용되지 않는 속성의 다중 정의

좋은 하루 되세요.

https://github.com/vuejs/vue-hackernews-2.0을 사용하여 Vuejs/Vuex/vue-router를 사용하여 애플리케이션을 구축하고 있습니다.

IE11을 사용하여 애플리케이션을 빌드 및 표시하면SCRIPT1046: Multiple definitions of a property not allowed in strict mode컴파일된 정보를 참조합니다.app.[#hash].js파일입니다. 컴포넌트의 다음 항목에 대한 중복 속성을 추적했습니다.

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

컴파일된 파일에서 참조할 수 있는 것은 다음뿐입니다.

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

컴파일된 파일에서 오브젝트에 중복된 속성이 있을 수 있는 곳을 찾을 수 없습니다.이거 본 사람 있어?컴포넌트에 뭔가 문제가 있어서 이렇게 하고 있는 건가요?

감사합니다, 아무쪼록 잘 부탁드립니다.

v-model과 :체크박스를 동시에 사용할 수 없습니다.v-model="selectedGender"를 추가하면 selectedGender의 값을 기준으로 확인 상태를 확인할 수 있습니다.이로 인해 다음 코드가 생성되었습니다.

체크: t._q(t.selected Gender, "MALLE")

또한 :check="selectedGender === 'FEMEN'을 추가하면 다음과 같은 다른 방법으로 확인 상태를 설정할 수 있습니다.

확인: "여성" === t.selectedGender,

둘 다 가질 순 없어이 문제를 해결하려면 :체크된 =를 삭제하십시오.

@Charles answer를 기반으로 구축하려면 다른 중복 속성에도 해당됩니다.예를 들어, 당신은 가질 수 없다.:value="myProperty"그리고.value="true"Charles 답변에 언급된 것과 유사한 코드를 생성한다고 선언했습니다.

중복된 속성을 삭제하기만 하면 이러한 문제가 해결됩니다.

언급URL : https://stackoverflow.com/questions/50512933/vue-js-multiple-definitions-of-a-property-not-allowed-in-strict-mode