javascript - 使用 Vue.js 将 v-if 构造为 v-for 内部的过滤器时出现问题

Question

我在使用 v-for 设置 v-if 时遇到了一些麻烦，因为我是 Vue 的新手。我目前有:

<div class="row form-group" v-for="(article, key, index) in articles" :key="key" v-if="article.pubdate(first four characters)">={{ filterYear}} >

我不确定如何将 pubdate 的前四个字符视为数字，以及如何传入 filterYear。articles 是使用 Axios 返回的 JSON 对象。但是，pubdate 的格式为:年、空格，然后是月。例如:

2007 Aug
/* or */
2009 Aug 1

我需要做的是确定年份，并将其传递到 v-if 中，因此只会显示在这一年或之后写的文章。我在 JavaScript 端有类似的代码，用于识别值并将它们放入字符串 (uid_string)。参见 Codepen .

Answer 1

我建议使用 computed property 而不是 v-if 循环过滤器稍微简化循环的模板。与其他解决方案相比，此解决方案的另一个优势是它消除了对每个项目进行额外序数计算的需要，因为序数自然匹配项目的数组索引递增 1。

例如，您可以将@Stephen 建议的过滤器移动到计算属性中:

<script>
export default {
  computed: {
    filteredArticles() {
      const { articles, filterYear } = this
      return Object.values(articles)
        .filter(article => parseInt(article.pubdate.substring(0,4)) >= filterYear)
    }
  }
}
</script>

然后，像这样在模板中使用计算属性:

<template>
  <div v-for="(article, index) in filteredArticles" :key="article.uid">
   ...
  </div>
</template>

demo