Vue.js getElementById（）以错误的组件实例为目标

我试图在Vue.js中构建一个小项目，我定义了一个子组件，父组件有六个实例

子组件有一个div元素：

<div class="player" id="player1">

问题是，当我告诉子组件的第二个实例执行其功能时，子组件的第一个实例将改变不透明度

我怀疑它与惟一的div id有关，即通过创建子组件的多个实例，id:

playerName

不再是惟一的

---

有没有人对子实例如何在不干扰自身其他实例的情况下访问自己的组件元素提出建议？

如您所述，这是因为id是全局的，

getElementById

将返回DOM中具有该id的第一个元素。它不知道有关youe Vue组件边界的任何信息

访问组件中元素的正确方法是使用

$refs

，而不是

getElementById

。。。

changeOpacity（）{
此值为$refs.playerName.style.opacity=0.5
}

然而，直接操作DOM并不是一种非常有效的方法。相反，您应该将不透明度绑定到数据属性，并对其进行更改

。。。

数据（）{
返回{
不透明度：1
}
}

changeOpacity（）{
该值为0.5
}

全文：

newvue({
el:“#应用程序”，
数据（）{
返回{
不透明度：1
}
},
方法：{
更改不透明度（）{
该值为0.5
}
}
})

内容
改变

changeOpacity(){document.getElementById('playerName').style.opacity = 0.5;}