Question

我正在使用v-for遍历我的消息。现在，我要检查的是每个消息的日期，如果日期有所不同，请显示日期，将其添加到我的数据中，然后继续。这意味着每天只能显示一次。

<template v-for="(message, index) in messages">
  <div class="spacer">
    <span class="grouped-date" v-if="displayPostDate(message.created_at)">
        {{ message.created_at }}
    </span>
  </div>
</template>

奇怪的是，在我的方法displayPostDate()中，我可以检查：

if (!this.datesDone.includes(d)) {}

这在我console.log时成功完成，但是无论我返回什么，Vue都不会解析正确的数据。

这里是displayPostDate()：

let d = date.substring(0, 10);

if (!this.datesDone.includes(d)) {

    console.log('not present');
    this.datesDone.push(date.substring(0, 10));

    return true;

} else {

    console.log('present');
    return false;

}

Answer 1

这是正在发生的事情...

AndroidTemplates loader = new AndroidTemplates(getBaseContext()); Theme theme = new Theme(loader); Chunk chunk = theme.makeChunk("test.cxml"); c.set("fptime", "testa"); return c.toString();方法具有更新反应性依赖项的副作用（即，它更新#include<stdio.h> #include<time.h> #include<stdlib.h> int main(void) { srand(time(0)); int lucky = (rand() % 26) + 65; printf("> %d", lucky); return 0; }），这会导致另一个渲染周期，从而再次调用该方法。

例如，假设您有一个空的displayPostDate和datesDone[]中的四个项目，每个项目都有唯一的datesDone[]日期。

在初始渲染时，messages[]在其created_at中找不到任何displayPostDate日期，因此将它们附加到数组中。它还返回created_at以显示datesDone[]。
Vue检测到true中的变化-span的依赖性，因此开始另一个渲染周期。
在第二个渲染上，datesDone[]在displayPostDate中查找所有日期，因此displayPostDate不变。它还返回datesDone[]以隐藏datesDone[]。由于依存关系没有变化，因此Vue不会重新渲染。

解决方法...

首先，请注意，调用模板中的方法是inefficient，因为每次渲染模板时都会调用该方法，这可能会多次发生，这又要求该方法是幂等的（并且不能更改其反应性依赖项）以避免渲染循环。

为解决此问题，一种更简单的解决方案是对列表进行预过滤，以使其仅包含要显示的项目（而不是有条件地在模板中呈现）。假定模板除跟踪重复项外没有其他用途，它还具有简化模板和消除对false的需求的附加好处。我建议将此列表创建为computed property，以便缓存结果，而不必在另一个渲染周期中不必要地重新评估结果：

span

demo

Answer 2

请勿在{{1}} s中使用方法-那是越野车（如您所遇到的），并且不是 Vue方式（here's why）。改用计算属性：

添加一个存储布尔数组的计算属性
```
locations = locations.locations;
```
有条件地在模板中显示日期：
```
v-if
```

VueJS v-if with方法始终返回false

2 个答案:

这是正在发生的事情...

解决方法...