Vue - Как отобразить выбранный элемент и предыдущий / следующий элемент массива

#vue.js #vuejs2 #vue-component

#vue.js #vuejs2 #vue-компонент

Вопрос:

У меня есть два элемента в двух строках рядом друг с другом:

Я ввел их все в массив объектов и вызвал их через props, чтобы отобразить их в левом.

Теперь то, что я хочу сделать, это когда я нажимаю на любой канал из левого элемента, он отображается справа с первым элементом перед ним и после него в массиве, поэтому я собираюсь использовать функцию $emit with @clicked , чтобы получить событие для его вызова на app.vue . Но я не знаю, что делать после, чтобы он отображался.

Я чувствую, что должен создать новый компонент, но я в недоумении относительно элементов внутри.

Редактировать: Извините, я забыл упомянуть, изображение — это дизайн, а не результат моего кода, я мог создать только левый «список станций» и возникла проблема с выполнением правой части на основе щелчка левой части

1. Вам необходимо включить соответствующий код

2. Похоже, что ваше представление уже знает, как развернуть только одну из станций в списке справа, поскольку расширена только одна. Вы сделали это таким образом: <div v-if="index_in_this_list === expanded_index">Expanded content here ?

3. Извините, я забыл упомянуть, что изображение — это дизайн, а не результат моего кода, я мог создать только левый «список станций» и возникла проблема с выполнением правой части на основе щелчка левой части

4. Вам нужно немного уточнить свой вопрос — чего вы надеетесь достичь в своем коде?

Ответ №1:

Вы действительно можете создать 2 компонента. 1 компонент, содержащий список всех станций. другой компонент, отображающий сведения о радиостанции. В тот момент, когда вы нажимаете станцию в списке, она отправляет событие и обновляет свойство в vue.app. Это может, например, называться selectedStation. ваш компонент, который показывает подробную информацию о радиостанции, просто получает prop с подробной информацией о станции.