Vue에서 API 콘텐츠 렌더링을 사용하여 팝업 목록을 여는 방법

Question

API 요청의 사용자 정의 콘텐츠가 포함된 렌더링된 목록에서 팝업을 열려고 합니다.

현재 다음 코드가 있습니다.

<템플릿>
  

      
          

            
{{ i.gsx$titre.$t }}
            
{{ i.gsx$auteur.$t }}
          
      
      
팝업 창의 내용을 여기에 넣으세요
  



<스크립트 lang="ts">
"vue"에서 import {defineComponent }를 가져옵니다.

기본 정의 내보내기({
    데이터 () {
        반품{
            항목: [],
        }
    },
    만들어진(){
            this.axios.get("///API URL")
            .then(응답 => (this.items = response.data.feed.entry))
        },
    방법: {
        
    }
        
    })
    

v-for 안에 또 다른 숨겨진 div를 갖고 싶은데 링크를 클릭하면 팝업이 나타납니다. 
항목 배열에 팝업에 대한 모든 데이터가 있습니다. 
            

Answer 1

각 항목에 대해 별도의 구성 요소를 만들고 해당 구성 요소에서 모달 상태를 처리할 수 있습니다. 부트스트랩, bulma 또는 순수 html 및 css를 사용하여 모달 상자를 만들 수 있습니다. v-show="modalState"来隐藏或显示模态框。在你的子组件中定义modalState 사용:

으아악

최종 구조:

으아악