Vue - 如何显示单击的项目和数组的上一个/下一个项目

Question

我有两个相邻的两行元素：

我已经将它们全部输入到一个对象数组中，并通过道具调用它们以将它们显示在左侧。

现在我想要做的是，当我单击左侧项目中的任何频道时，它会显示在右侧，并在数组中显示它之前和之后的第一个项目，所以我将使用 $emit 和 @ 987654324@ 函数获取在app.vue 上调用它的事件。但我不知道要让它显示后该怎么做。

我觉得我应该创建一个新组件，但我对其中的元素不知所措。

编辑：对不起，我忘了提，图片是设计而不是我的代码的结果，我只能创建左侧的“电台列表”，并且在单击左侧时出现右侧部分的问题部分

Answer 1

您确实可以创建 2 个组件。 1 个包含所有站点列表的组件。另一个显示广播电台详细信息的组件。 当您单击列表中的站点时，它会发送一个事件并更新 vue.app 中的属性。例如，这可以称为 selectedStation。 显示广播电台详细信息的组件只会收到一个带有电台详细信息的道具。