模板在vue.js中呈现两次

在我的组件模板中，我有以下代码：

   <div
        class="program-point-container"
        v-for="p in programPoints"
        :key="p.id"
    >

        <div class="mt-6 mt-sm-3 mt-md-14 mb-3 font-weight-bold font-size-16" v-if="showDate(p.startsAt)">
            {{new Date(p.startsAt) | moment('DD.MM.YYYY')}} // Humboldt Carré
        </div>
</div>

扔掉“JQuery思维”。这不是Vue的工作方式。您的模板现在和将来都会被呈现多次—只需每次它使用的某些反应性数据发生更改时

您不需要关心之前呈现了什么，也不需要关心如何更新新数据状态的结果。这是Vue的工作。只需以“我想在屏幕上看到什么”的风格编写模板，Vue就会处理剩下的部分

只需删除与showDate相关的所有内容即可-不需要它。并阅读文档

更新 在对象数组中，我有一个具有datetimes的属性。我只想在日期出现的第一个对象上显示一次日期。剩下的就不管了。当一个新的日期出现时，我希望它也显示出来，但只显示第一个对象，以此类推

我想为第一个迭代的对象添加一个额外的键，该对象具有唯一的日期。其他的将被忽略，直到另一个具有唯一日期

搏击俱乐部的第一条规则…ehm Vue是：在模板渲染期间，切勿修改模板中使用的任何数据。在最好的情况下，你会得到错误的结果（就像你做的那样）。在最坏的情况下，你会得到无限循环

更好的解决方案是创建表示所需内容的替代数据结构，而且由于Vue，即使原始数据发生更改，它也保持最新

const vm=new Vue({
el:“应用程序”，
数据（）{
返回{
节目要点：[
{id:1，名称：'Program A'，起始日期：'2021/04/13'}，
{id:2，名称：'Program B'，起始日期：'2021/04/14'}，
{id:3，名称：'Program C'，起始日期：'2021/04/14'}，
{id:4，名称：'Program D'，起始日期：'2021/04/18'}，
{id:5，名称：'Program E'，startsAt:'2021/04/13'}，
{id:6，名称：'Program F'，起始日期：'2021/04/18'}，
]
}
},
计算：{
programmbydays（）{
返回此.programPoints.reduce（（附件，项目）=>{
如果（！acc[项目开始日期]）{
acc[项目开始日期]=[]
}
acc[item.startsAt]。推送（item）
返回acc
}, {})
}
},
安装的（）{
setTimeout（（）=>this.programPoints.push（{id:7，name:'Program SPECIAL'，startsAt:'2021/04/20'}），2000）
}
})

{{date}}



{{program.name}

我懂了。那我该怎么做呢？在对象数组中，我有一个具有datetimes的属性。我只想在日期出现的第一个对象上显示一次日期。剩下的就不管了。当一个新的日期出现时，我希望它也显示出来，但只显示第一个对象等等。啊..我明白了。因此，您需要创建一组
程序点
，其中每个组都有相同的
开始日期
日期，然后呈现（唯一）日期列表（+可能是给定日期的
程序点列表
）。是这样吗？是的。我想为第一个迭代的对象添加一个额外的键，该对象具有唯一的日期。其他的将被忽略，直到另一个具有唯一日期。
showDate(datetime) {
        const date = new Date(datetime).toDateString()
        // check if date already been pushed
        if(this.dates.includes(date)) {
            console.log('false')
            return false // date already been pushed
        }
        this.dates.push(date)
        console.log('true')
        return true

    },