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

Question

我正在编写一个小型 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';

这可以正确检测任务何时过期，但它总是使第一个待办事项变为红色，而不是过期的待办事项。如何正确定位组件？我的想法是，当我执行 document.getElementById 时，它会找到第一个#taskCard，因为它正在查看页面。有没有办法做类似 this.getElementById 或 my-component.getElementById 的事情？

感谢您的帮助！

Answer 1

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

相反，您想要做的是让数据驱动您的显示，因此与其尝试查找所有过期的事物并为其设置样式，不如让事物在过期时自行设置样式。

例如

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

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

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