Vue.js 更改后将状态绑定到另一个div（VueJS）

我使用的是UIKit中的滑块，它没有关于如何使用其事件的文档。滑块的数据由带有Vuex的API提供。我正在使用

v-for

遍历数据并显示许多幻灯片。我在网站上还有另一个部分需要更新，具体取决于带有

class=“uk active”

（由UIKit生成）的幻灯片。我在幻灯片上绑定了一个ID，使它们独一无二。我希望在这里做的是：

• 如果幻灯片的class

  uk处于活动状态

  ，请将其ID保存在变量上
• 根据

  uk active

  类捕获ID后，显示与该ID对应的名为

  “number”

  的状态值

模板摘录：

这里是吊舱号


... 循环的数据。。。

我试图通过

挂载的

生命周期挂钩中的

className

获取ID，但是

类列表

无法识别。该类根据滑块的变化而变化，因此其效果可能在不同的生命周期中。不管怎样，我都想不出来

我对使用指令的Vue解决方案或Javascript解决方案没有意见

使用Vue的和，而不是DOM操作

UIKit滑块的beforeitemshow事件有一个事件详细信息，指示将要显示的项目，它还包括列表中的项目索引。您可以将一个

beforeitemshow

-处理程序附加到

uk滑块

（1），该滑块使用项目索引在

allPods中查找相应的ID

（2）

要使ID显示在标题

div

，请在模板（3）中添加要插入的数据属性，在（4）中初始化它（或在

allPods

上），并在前面提到的事件处理程序（5）中确定项ID时设置该属性

POD{{currentPodId}
...

newvue({
el:“#应用程序”，
数据：{
currentPodId:“”，/*（3b）*/
allPods:[{id:'pod1'}，/*…*/]
},
安装的（）{
this.currentPodId=this.allPods[0].id/*（4）*/
},
方法：{
（e）{/*（1b）*/
const shownItem=e.detail[0]
this.currentPodId/*（5）*/=this.allPods[shownItem.index].id/*（2）*/
},
}

---

如果我正确理解了问题，您的小提琴似乎已经在做您正在寻找的事情（即，显示与活动滑块项相对应的

pods.number

）。我缺少什么？@tony19它在v-for中进行操作，因为数据在范围内。我需要访问pods.number，其中显示“number here”这是v-for循环之外的。非常感谢。它完全按照我的设想工作。我可以看到你如何做的逻辑。这将帮助我处理其他事情。我确实有一个TypeError tho，但只要它工作，我就不太担心。

挂载钩子中的错误：“TypeError:无法读取未定义的属性'id'”

这可能意味着您的Vuex应用商店尚未填充

allPods

。在这种情况下，请改用监视程序，以便设置不依赖于生命周期挂钩。