vue3 js 구성 요소: 구성 요소가 업데이트되지 않았습니다.

Question

API에서 데이터를 수집하는 구성요소가 있습니다. API에서 반환된 데이터는 세부정보가 포함된 배열입니다. 배열의 값 중 하나는 렌더링해야 하는 구성 요소의 유형이며, 다른 모든 데이터는 구성 요소에 전달됩니다. 데이터베이스에서 가져온 값을 기반으로 올바른 구성요소를 렌더링하려고 하는데 안타깝게도 작동하지 않습니다. 저는 Vue를 처음 접했지만 vue2에서 작동하지만 컴포지션 API를 사용하여 Vue 3에서도 작동하기를 바랍니다.

교체하려는 구성 요소 코드는 다음과 같습니다.

으아아아

브라우저에서 볼 때 실제로 표시되는 내용은 다음과 같지만 SelectInput 구성 요소를 사용하지 않습니다.

으아아아

SelectInput은 내 디렉터리의 구성 요소이며 :is 값을 하드코딩하면 다음과 같이 예상대로 작동합니다.

으아아아

내 전체 구성 요소가 component 구성 요소를 호출하고 구성 요소를 교체합니다.

<component :is="question.type" :propdata="question" />

Answer 1

구성 요소 파일 이름이 문제의 개체에 대한 유형 지정자와 동일한 경우 해당 파일을 동적으로 가져와 일부 코드 줄을 저장할 수 있습니다.

더 많은 유형을 생성하면 더 이상 이 구성 요소를 건드릴 필요가 없기 때문에 확장성이 향상됩니다.

으아악

Answer 2

脚本设置，所以组件未命名，因此组件 구성 요소를 사용하고 있었기 때문에 어떤 구성 요소를 렌더링해야 할지 몰랐다는 사실을 알게 되었습니다.

그래서 구성 요소와 구성 요소에 대한 참조를 포함하는 개체를 만듭니다.

으아아아

표시하려는 구성 요소를 가져와 실제 구성 요소에 연결하는 또 다른 기능:

으아아아

그런 다음 템플릿에서 함수를 호출하고 올바른 구성 요소를 렌더링합니다.

으아아아

전체 고정 코드:

으아아아

이 접근 방식이 올바른지는 확실하지 않지만 이제 올바른 구성 요소를 렌더링합니다.