Vue.js 함수가 구성 요소 속성에 액세스하지 못했습니다.

Question

Vue.js에 익숙하지 않아서 아침 내내 미친 듯이 느껴졌습니다. :) 이 경우 일반적으로 자주 사용하는 구성 요소를 만드는 동안 mounted 함수 내에서 Google지도를 초기화해야했습니다. 올바른 위치 인 것처럼 보입니다. mounted 함수에서 중첩 된 입력 필드의 id 속성에 액세스하고이 필드에 이벤트 수신기를 연결합니다. 아주 간단한 권리?

글쎄, 내 페이지에서 구성 요소를 여러 번 사용하려고하면 어떤 식 으로든 mounted 함수 내에서 동일한 (겉으로보기에는 공유 된) this 변수에 액세스하는 것으로 나타났습니다.

왜 이런 일이 발생하고 기능이 더 이상하지만 더 이상하게 만들지 모르겠다면, 소품은 템플릿 내에서 올바른 값을 산출합니다. (뿐만 아니라 방법 이내)

<template> 
    <div class="LocationInput"> 
    <input 
     type="text" 
     :id="id" 
    /> 
    </div> 
</template> 

<script> 
export default { 
    name: 'LocationInput', 
    props: ['id'], 
    mounted() { 
    console.log('Component object representation ==> ', this) 
    console.log('ID ==> ', this.id) 
    } 
} 
</script> 

내 구성 요소를 사용하여

구성 요소 정의 ... 나는 하루의 끝에서 무엇을 얻을

<template> 
    <div class="MyTravelApp"> 
    <LocationInput id="id1"/> 
    <LocationInput id="id2"/> 
    </div> 
</template> 

<script> 
import LocationInput from './components/LocationInput'; 
export default { 
    components: { LocationInput } 
} 
</script> 

은 정확 id 값은 템플릿에 있지만 내 콘솔에서는 아래에서 볼 수있는 것과 똑같은 객체와 ID가 기록됩니다. _uid 속성이 둘 모두에 대해 어떻게 동일한 지주의하십시오. 검사, I 번째 성분 속성뿐만 아니라 개질 것이 있는지 관찰하면서

는 mountedthis 함수의 변수를 수정 한 후, 더 악화 문제를 확인한다. 그래서 그들은 본질적으로 매우 똑같은 대상을 공유하고 있습니다.

누구든지 비슷한 문제가 있고 어떻게 처리해야하는지 알고 싶습니다.

Answer 1

No self-closing tags for components.

Vue 템플릿은 유효한 HTML이어야합니다. HTML5에는 "자체 닫기 태그" 이 없습니다. 이제 XHTML 구문이 적용되었으며 구형이므로 을 사용하지 마십시오.

은 (이상 주 :

참고로 자동 폐쇄 태그만큼 당신이-DOM 템플릿을 사용하지 않는 2.0에서 작동합니다.

camelCase vs. kebab-case과 관련된 문제가있을 수도 있습니다. 아래 스 니펫은 예상대로 작동합니다. = "ID1"ID :

Vue.component('locationInput', { 
 
    template: '#location-input-template', 
 
    props: ['id'], 
 
    mounted() { 
 
    console.log('Component object representation ==> ', this._uid) 
 
    console.log('ID ==> ', this.id) 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#my-travel-app' 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<template id="location-input-template"> 
 
    <div class="LocationInput"> 
 
    <input type="text" :id="id"> 
 
    </div> 
 
</template> 
 

 
<div id="my-travel-app"> 
 
    <location-input id="id1"></location-input> 
 
    <location-input id="id2"></location-input> 
 
</div>