Carousel: Index is undefined in PassThroughOptions

[AdamKj]

Describe the bug

I am trying to access the current index for each item inside the PassThroughOptions since I am using an unstyled component and needing to style the component by myself.

Looking at the component style, you are using the index prop:

https://github.com/primefaces/primevue/blob/master/packages/primevue/src/carousel/style/CarouselStyle.js

But when I am trying to access the index prop I just get undefined:

Please let me know if you need more information.

Reproducer

https://stackblitz.com/edit/2chshc?file=src%2FApp.vue

PrimeVue version

4.0.0

Vue version

3.x

Language

ES6

Build / Runtime

Vue CLI App

Browser(s)

Chrome

Steps to reproduce the behavior

1. Run the StackBlitz project
2. Right-click anywhere on the page and click Inspect
3. Open the console and look for the console.log() including the text index

Expected behavior

Accessing each index per item in the Carousel so I can style each separate item.

[WatCodeDatCode]

The index is undefined there because index does not exist as an option for the item passthrough. It works in the main style because this is passed directly to the class "under the hood" through the BaseComponent's cx method.

Having said that, as you have illustrated, you have access to the index through the item slot itself. This can therefore be used directly within the template to dynamically apply classes or other logic based directly on the index.

Assuming that you wanted to style similarly based on the start, end, or active item like in the base style, you can even use a :deep selector for the data-p-carousel-item-{x} attribute.

Here an updated example.

[tugcekucukoglu]

Finding a solution for PT by looking at the inner API is not the right way. It may mislead you. In the new version, you can reach the index with context.

[AdamKj]

The index is undefined there because index does not exist as an option for the item passthrough. It works in the main style because this is passed directly to the class "under the hood" through the BaseComponent's cx method.

Having said that, as you have illustrated, you have access to the index through the item slot itself. This can therefore be used directly within the template to dynamically apply classes or other logic based directly on the index.

Assuming that you wanted to style similarly based on the start, end, or active item like in the base style, you can even use a :deep selector for the data-p-carousel-item-{x} attribute.

Here an updated example.

Thank you for the help! I opted to go with another approach, but this might be useful for other components.

[AdamKj]

Finding a solution for PT by looking at the inner API is not the right way. It may mislead you. In the new version, you can reach the index with context.

The context seems to be undefined as well:

[tugcekucukoglu]

In the new version, you can reach the index with context.

[AdamKj]

In the new version, you can reach the index with context.

Sorry I don't know which new version you mean, I am using v4 in my project and I am reading the documentation for v4.