다음 슬라이드를 표시하도록 배열 인덱스 변경
<p><pre class="brush:php;toolbar:false;"><템플릿>
<div class="캐러셀">
<슬롯>
<버튼 @click="index++">다음</button>
</div>
</템플릿>
<스크립트 설정>
'vue'에서 { useSlots, onMounted, onUpdated, ref} 가져오기;
const 슬롯 = useSlots()
const 인덱스 = 참조(0)
onMounted(() => {
const defaultSlotElements = Slots.default()
console.log(`내 기본 슬롯에는 ${defaultSlotElements.length}개의 요소가 있습니다.`)
}),
onUpdated(() =>{
console.log(defaultSlotElements[색인])
}
)
<p>슬롯 기반 캐러셀을 만들려고 합니다. 슬롯 배열을 추출하는 방법을 알아내는 데 도움을 준 이전 Stack Overflow 담당자에게 감사드립니다. 이제 또 다른 문제를 다루고 있습니다. 회전판을 만들려면 회전판의 다음 슬라이드로 이동할 수 있도록 배열에 있는 요소의 인덱스를 어떻게든 변경해야 합니다. 나중에 V-show가 기본값이 0인 현재 슬롯을 렌더링하도록 하기 위해 이것을 내 슬라이드쇼 구성 요소에 삽입해야 했습니다. 그러나 인덱스를 변경하는 v-on 명령어에 의해 인덱스 값이 변경되므로 배열의 다음 또는 이전 슬롯을 선택합니다. vue에서 복잡한 테마를 선택했다는 것을 알고 있지만 이미지 배열을 기반으로 하는 간단한 버전의 캐러셀을 사용하고 싶지 않습니다. 그 안에 다른 구성 요소를 추가할 수 없기 때문입니다. </p>
<p>인덱스 <code>arr[index]</code>를 변경하는 것만으로는 배열의 다음 개체를 선택할 수 없다는 사실이 밝혀졌습니다. </p>
