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'} : {}
    }
}

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

1 个答案: