v- for 렌더링 안 함 구성 요소

v- for 렌더링 안 함 구성 요소

컴포넌트를 포함하려고 합니다.v-for데이터 소스infoTexts는 로케일코드를 키로, 메시지를 값으로 포함하는 오브젝트입니다.예:

{
    nl: 'Text in Dutch',
    fr: 'Text in French',
    en: 'Text in English'
}

컴포넌트를 포함하기 위해 사용하는 코드는 다음과 같습니다.

<text-editor v-for="(value, index) in infoTexts" :key="index" :database-message-contents="value" :message-locale-code="index"></text-editor>

둘다요.database-message-contents그리고.message-locale-code의 소품입니다.text-editor요소.

콘솔에 에러 메시지는 표시되지 않지만text-editor가 표시되지 않습니다.

그 문제는 Vue의 라이프 사이클에 대한 오해와 관련이 있었다.제가 만든 것은infoTexts에서mounted방법.로의 재배치created방법이 문제를 해결했습니다.

당신의 문제에 대한 당신의 답변은 부분적으로만 해당되며 다른 사용자를 오도할 수 있습니다.

이유를 설명하겠습니다.

• 이 문제의 근본 원인은 잘못된 Vue 라이프 사이클 방법을 사용하는 데 있지 않습니다.
• v-force 자체는 사후 대응적이므로 라이프사이클 동안 언제든지 요소를 추가할 수 있으며 이 요소는 다시 지정됩니다.

의 상정된 코드mounted방법:

this.infoTexts.nl = 'Text in Dutch'

Vue는 런타임에 개체에 추가된 속성을 검색할 수 없으므로 이 코드가 작동하지 않습니다.

대신 Vue를 사용해야 합니다.set method 제공.그래서 당신의 새 코드는 이렇게 생겼을 겁니다.

Vue.set(this.infoTexts, 'nl', 'Text in Dutch');

위의 코드를 사용하면 언제든지 원하는 라이프 사이클 방식으로 새로운 언어를 추가할 수 있습니다.

코드를 입력하지 않았더라도,infoTexts어레이의 95%가 문제의 원인입니다.

언급URL : https://stackoverflow.com/questions/48825856/component-with-v-for-not-rendering