Javascript 页面上具有同一组件的多个实例的getElementById

我正在编写一个小型vue应用程序。在一个页面上，我包含了相同组件的多个实例，如下所示

<my-component v-for="t in todos"></my-component>

在该组件中，我显示诸如待办事项的名称和描述以及到期日期之类的数据。我用这个函数检查它是否过期

let d = new Date();
let overdue = false;
this.deadline = new Date(this.deadline);
if (this.deadline < d) { overdue = true; }
if (overdue && !this.completed) {
    document.getElementById('taskCard').style.backgroundColor = 'red';

设d=新日期（）；
让过期=假；
this.deadline=新日期（this.deadline）；
如果（this.deadline

这可以正确地检测任务是否过期，但它总是将第一个待办事项变为红色，而不是过期的。我如何才能正确地定位组件？我的想法是，当我执行document.getElementById时，它会找到第一个任务卡，因为它正在查看页面。是否还有其他方法可以这样做。getElementById还是我的组件.getElementById

谢谢你的帮助！

这真的不是“Vue”做事的方式

相反，你想做的是让数据驱动你的显示，因此，不要试图找到所有过期的东西并设置它们的样式，如果它们过期了，就让它们自己设置样式

比如说

<my-component :style='compstyle' v-for="t in todos"></my-component>

然后在组件上有一个属性来绑定该样式

computed: {
    compstyle : function(){
        return (new Date(this.deadline) < new Date()) ? {'backgroundColor' : 'red'} : {}
    }
}

计算：{
compstyle:function（）{
return（新日期（this.deadline）

你能分享

我的组件的代码吗

？ID在整个HTML页面上应该是唯一的。

getElementById

永远不能指向多个元素。谢谢你的回答！这非常有帮助，而且是一种非常干净的方式。我是vue的新手，所以看到你的思考过程非常好。谢谢！