由于我对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。
答案 0 :(得分:2)
我建议使用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>
答案 1 :(得分:1)
要从前四个字符获取整数年份:
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