Vue.js는 초기 값 prop를 사용하여 v-model 입력을 바인드합니다.

Question

v-model에 바인딩 된 선택 입력에 초기 값을 전달하려고합니다. 나는이 작동하지 않는 이유를 알아낼 수 없습니다 :

props: ['team'], 
data() { 
    form: { 
     data: { 
      country: this.team.country 
     } 
    } 
} 

form.data.country이 undefined입니다. 그러나 소품 데이터는 실제로 전달됩니다. 나는 Vue Devtools (과 같은)으로 액세스 할 수 있으며이 소품의 다른 데이터를 인쇄 할 수 있습니다. 그러나 data()에는 등록되지 않았습니다.

또한 mounted()을 사용하여 디버깅을 시도하면 team 속성이 정의되지 않습니다.

mounted() { 
    console.log(this.team); 
} 

그러나 이전에 언급했듯이 템플릿은 렌더링 될 때 정의되며 이와 같이 사용할 수 있습니다.

<input class="input" type="text" name="name" :value="team.name" disabled> 

전달하는 속성이 data()에 인식되지 않는 이유는 무엇입니까?

Answer 1

소품 데이터는 부모에 의해로드됩니다. 이것은 @Bert의 코멘트에서 제안되었습니다.

Answer 2

비동기 로딩은 문제가 아닙니다. 팀이 위에서 하드 코딩 된 경우에도 구성 요소에서 데이터가 생성 될 때 it's still undefined입니다. (구성 요소는 소품을 전달하는 루트 Vue 전에 만들어야합니다.)

누군가가 나를 교정 할 것입니다. 데이터에서 소품을 참조 할만한 충분한 이유가 없습니다.뭔가가 소품의 또는 (이 원하는 것을 찾을 수있는 현재의 구성 요소가 알고있는) 어느 데이터 (구성 요소는 정보를 제공 문맥의 드릴 것)입니다.

그런 다음 데이터를 한 번 만들었습니다. Vue는 변경 사항을 모두 감시하지만 루트 값의 변경에 취약합니다. 데이터가 생성 될 때 값으로 참조되는 것이 변경되면 반응 파이프가 손상됩니다. 이에 대한 대답은 store pattern입니다. 글로벌 범위에서 변수를 보았습니다. 변수는 내용이 변경 될 수 있음에도 불구하고 대체되지 않습니다.

code