Question

由于我对Vue很陌生，因此在设置v-if和v-for时遇到了一些麻烦。我目前有：

<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

Answer 2

要从前四个字符获取整数年份：

parseInt(article.pubdate.substring(0, 4))

<div  
v-for="(article, key, index) in articles" 
:key="key" 
v-if="parseInt(article.pubdate.substring(0, 4))>=filterYear">

Your code here... 
To print the article JSON put it in braces: {{article}}.
Or the date {{article.date}}, etc.
Don't put the braces in your template attribute value though.

</div>

Vue的优点在于，所有模板属性都是相对于组件而言的，因此您无需使用this.来引用它们。

您还可以通过移动parseInt（...）并将其与组件方法进行比较来清理模板。

这是您的Codepen的以下更改： https://codepen.io/anon/pen/NVrvre?editors=1111

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

2 个答案: