How to use "select" event when an element on timeline is selected?

[Djshn]

I am trying to add a "select" event so whenever user selects an element on the timeline, it adds a css class to a v-card that holds the details of that element.

<timeline ref="timeline" :items="events" :options="{}" :events="['select']" @select="highlightSelected" :groups="[{id: 0, content: ''}]"></timeline>

<v-card v-for item in messages>{{item.title}} </v-card>

highlightSelected(props){ console.log(props.items) }, It returns the item.title of the selected element. Now I want to check this item.title with the one in v-card and if they were the same, I want to highlight the card. I appreciate your help

[Menighin]

Hi @Djshn, if you could provide a fiddle it would be easier.

One approach is having a variable keeping the selected item. Then, on your v-card you could add a CSS class if the selectedItem is equal to the v-card.

Here's a fiddle with this approach: https://jsfiddle.net/sc23xmzn/

[Djshn]

Thank you! It works. I was using props.items instead of props.items[0]