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

我正在使用

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>

当I

console.log

it时，这会成功工作，但无论我返回什么，Vue都不会解析正确的数据

下面是

displayPostDate（）

：

---

不要在

v-if

s中使用方法-这是错误的（正如您所遇到的），而这不是Vue方法（）。请改用计算属性：

添加存储布尔数组的计算属性

computed: {
  displayPostDateArr() {
    return this.messages.map(message => this.displayPostDate(message.created_at));
  }
}

在模板中有条件地显示日期：

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

{{message.created_at}}

---

不要在

v-if

s中使用方法-这是错误的（正如您所遇到的），而这不是Vue方法（）。请改用计算属性：

添加存储布尔数组的计算属性

computed: {
  displayPostDateArr() {
    return this.messages.map(message => this.displayPostDate(message.created_at));
  }
}

在模板中有条件地显示日期：

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

{{message.created_at}}

这就是正在发生的事情。。。

displayPostDate

方法具有更新被动依赖项的副作用（即更新

datesDone[]

），这会导致另一个渲染周期，再次调用该方法

例如，假设您有一个空的

datesDone[]

和

messages[]

中的四个项目，每个项目都在

日期创建了唯一的

在初始渲染时，
displayPostDate
在其
datesDone[]
中未找到在
日期创建的任何
，因此它会将它们附加到数组中。它还返回
true
以显示
span
s
Vue检测到
datesDone[]
中的更改，这是
displayPostDate
的依赖项，因此它会启动另一个渲染周期
在第二次渲染中，
displayPostDate
查找
datesDone[]
中的所有日期，因此
datesDone[]
不会发生任何更改。它还返回
false
以隐藏
span
s。由于没有更改依赖项，因此Vue不会重新渲染
下面是如何修复它。。。
首先，请注意，在模板中调用方法是因为每次呈现模板时都会调用该方法，这可能会发生多次，这反过来要求该方法是幂等的（而不是更改其反应依赖项），以避免呈现循环

要解决此问题，一个更简单的解决方案是预过滤列表，使其仅包含要显示的项目（而不是在模板中有条件地呈现）。这还有一个额外的好处，即简化了模板并消除了对
datesDone[]
的需要，前提是它除了跟踪重复项之外没有其他用途。我建议将此列表创建为一个列表，以便缓存结果，而不必在另一个渲染周期中重新计算：

// script
computed: {
  uniqueMessages() {
    const uniq = this.messages.reduce((c, msg) => {
      c[msg.created_at] = c[msg.created_at] || msg
      return c
    }, {})

    return Object.values(uniq)
  }
}

// template
<div v-for="message in uniqueMessages">
  <span class="grouped-date">
    {{ message.created_at }}
  </span>
</div>

//脚本
计算：{
唯一消息（）{
const uniq=this.messages.reduce（（c，msg）=>{
c[msg.created_at]=c[msg.created_at]| msg
返回c
}, {})
返回Object.values（uniq）
}
}
//模板
{{message.created_at}}

这就是正在发生的事情。。。
displayPostDate
方法具有更新被动依赖项的副作用（即更新
datesDone[]
），这会导致另一个渲染周期，再次调用该方法

例如，假设您有一个空的
datesDone[]
和
messages[]
中的四个项目，每个项目都在
日期创建了唯一的

在初始渲染时，
displayPostDate
在其
datesDone[]
中未找到在
日期创建的任何
，因此它会将它们附加到数组中。它还返回
true
以显示
span
s
Vue检测到
datesDone[]
中的更改，这是
displayPostDate
的依赖项，因此它会启动另一个渲染周期
在第二次渲染中，
displayPostDate
查找
datesDone[]
中的所有日期，因此
datesDone[]
不会发生任何更改。它还返回
false
以隐藏
span
s。由于没有更改依赖项，因此Vue不会重新渲染
下面是如何修复它。。。
首先，请注意，在模板中调用方法是因为每次呈现模板时都会调用该方法，这可能会发生多次，这反过来要求该方法是幂等的（而不是更改其反应依赖项），以避免呈现循环

要解决此问题，一个更简单的解决方案是预过滤列表，使其仅包含要显示的项目（而不是在模板中有条件地呈现）。这还有一个额外的好处，即简化了模板并消除了对
datesDone[]
的需要，前提是它除了跟踪重复项之外没有其他用途。我建议将此列表创建为一个列表，以便缓存结果，而不必在另一个渲染周期中重新计算：

// script
computed: {
  uniqueMessages() {
    const uniq = this.messages.reduce((c, msg) => {
      c[msg.created_at] = c[msg.created_at] || msg
      return c
    }, {})

    return Object.values(uniq)
  }
}

// template
<div v-for="message in uniqueMessages">
  <span class="grouped-date">
    {{ message.created_at }}
  </span>
</div>

//脚本
计算：{
唯一消息（）{
const uniq=this.messages.reduce（（c，msg）=>{
c[msg.created_at]=c[msg.created_at]| msg
返回c
}, {})
返回Object.values（uniq）
}
}
//模板
{{message.created_at}}

displayPostDate（message.created_at）}的结果总是false，尽管当我控制台首先记录返回值时，它在某些情况下确实会说true。{displayPostDate（message.created_at）}的结果总是false，尽管当我控制台首先记录返回值时，我不知道你刚才做了什么，但看起来很酷：）我会学习（尝试）这一点，并让你知道结果。非常感谢您的回答！我很快会回来告诉你结果；）当我使用这段代码时，给了我一个错误“太多递归”，顺便说一句：PCouldn不能预测。你的代码没有包含一个我不知道你刚才做了什么，但看起来很酷