컴퍼넌트 슬라이드시 각 컴퍼넌트의 정보를 갱신 못 할 때

위와같이 슬라이드가 진행되도 예약가능시간정보가  각 카드마다 업데이트가 되지못하고 똑같이 유지되고 있습니다

 

이 문제를 해결하려면, 각 CafeIntroBoardCardForm 컴포넌트가 고유한 예약 가능 시간 데이터를 가지도록 수정해야 합니다.

먼저, MainCafeInfoForm 컴포넌트에서 visibleCafes()를 계산할 때 각 카페 데이터에 고유한 키를 추가하겠습니다. 이 키를 사용하여 CafeIntroBoardCardForm 컴포넌트가 고유한 예약 가능 시간 데이터를 가져올 수 있습니다.

 

그런 다음, CafeIntroBoardCardForm 컴포넌트에서 고유한 키를 사용하여 예약 가능 시간 데이터를 가져옵니다. props에 uniqueKey를 추가하고, 예약 가능 시간을 가져오는 메서드를 수정합니다.

 

이 코드에서 created() 메서드와 watch 항목을 수정하여 uniqueKey가 변경될 때마다 새로운 예약 가능 시간 데이터를 가져오도록 하겠습니다. 그러려면 다음과 같이 코드를 변경해야 합니다.

 

이제 uniqueKey가 변경될 때마다 updateCafeInfo() 메서드가 호출되어 새로운 예약 가능 시간 데이터를 가져옵니다. 이렇게 하면 각 카드가 자체 예약 가능 시간 데이터를 가져오며, 슬라이드를 넘길 때 다른 카드의 데이터를 사용하지 않습니다.

 

기존의 visibleCafes 계산된 속성을 수정하여 각 카페에 대해 고유한 uniqueKey를 추가하여 카드 컴포넌트가 다시 렌더링되도록 강제할 수 있습니다. 이렇게 하면 슬라이드로 넘어갈 때 각 카페에 대한 정보가 올바르게 업데이트됩니다.