次のスライドを表示するように配列インデックスを変更します

Question

<テンプレート>
    <div class="カルーセル">
        
        <スロット></スロット>
         <button @click="index">次へ</button>
    </div>

</テンプレート>
＜スクリプト設定＞
import { useSlots, onMounted, onUpdated, ref} from 'vue';

const スロット = useSlots()
定数インデックス = ref(0)
onMounted(() => {
  constdefaultSlotElements =slots.default()
  console.log(`デフォルトのスロットには ${defaultSlotElements.length} 要素があります。`)
  
})、
onUpdated(() =>{
    console.log(デフォルトのスロット要素[インデックス])
}
)

</script>

スロットベースのカルーセルを作成しようとしています。スロット配列を抽出する方法を理解するのを手伝ってくれた Stack Overflow の前の人に感謝します。今、私は別の問題に取り組んでいます。カルーセルを作成するには、カルーセルの次のスライドに移動できるように、配列内の要素のインデックスを何らかの方法で変更する必要があります。後でこれをスライドショー コンポーネントに挿入して、V-show にデフォルトの 0 である現在のスロットをレンダリングさせる必要がありました。ただし、インデックスの値はインデックスを変更する v-on 命令によって変更されるため、配列内の次または前のスロットが選択されます。 vue で複雑なテーマを選択したことはわかっていますが、画像の配列に基づく単純なバージョンのカルーセルは使用したくありません。別のコンポーネントを追加できないためです。

インデックス arr[index] を変更するだけでは、配列内の次のオブジェクトを選択できないことがわかりました。

Answer 1

本当にスロットでこれを行う必要がある場合は、これを行う必要があります Vue レンダリング関数と JSX

の使用 リーリー

これは仕事ですCSRC プレイグラウンド

更新

レンダリング関数はカスタム コンポーネントで使用できます。

これは、 構造を構築する試みです。

SFC プレイグラウンド

必要なものを構築するために、render 関数を使用する代わりに、default スロットを使用する他の方法は見当たりません。