Vue - How to display the clicked item and the previous/next item of an array

0
votes

I have two elements in two rows next to each other:

Example radio station screenshot

I have entered them all in an array of objects and called them through props to display them in the left one.

Now what I want to do is when I click on any channel from the left item, it shows in the right with the first item before it and after it in the array, so I am going to use $emit with @clicked function to get an event to call it on the app.vue. But I don't know what to do after to get it displayed.

I feel I should create a new component but I'm at a loss about the elements within.

Edit: Sorry I forgot to mention, the picture is the design not the result of my code, I could only create the left one "list of stations" and have a problem doing the right part based on a click of the left part

1
vue.jsvuejs2vue-component
You need to include the relevant code – Daniel_Knights
Your view already seems to know how to expand only one of the stations in the righthand list, since only one is expanded. Did you do it this way: <div v-if="index_in_this_list === expanded_index">Expanded content here ? – danh
Sorry I forgot to mention, the picture is the design not the result of my code, I could only create the left one "list of stations" and have a problem doing the right part based on a click of the left part – Ahmed Sarhan
You'll need to clarify your question a bit further - what are you hoping to achieve in your code? – MT_dev

1 Answers

0
votes

You can indeed create 2 components. 1 component having a list of all the stations. another component displaying the details of the radio station. The moment you click a station in the list, it sends an event and updates a property in the vue.app. This could for example be called selectedStation. your component that shows the detail of the radiostation just receives a prop with the details of the station.