javascript - Vue JS - 遍历计算属性以显示年份列表
问题描述
我目前有以下列出年份列表的代码。我觉得所有这些代码可能都是非常不必要的,也许validYears 的计算属性会帮助我使这段代码更优化并摆脱不必要的观察者。我的问题是将其转换为计算属性,因为我没有掌握正确的逻辑来实现这一点。如果有人可以提供一个示例,说明我如何为有效年份设置计算属性并仍然返回相同的结果,我将不胜感激。
onBeforeMount(calculateDateRange)
watch(() => props.earliestDate, (newValue, prevValue) => {
calculateDateRange();
});
// If there is a new value passed from the parent, the dropdown should display that new value.
watch(() => props.latestDate, (newValue, prevValue) => {
calculateDateRange()
});
const validYears = ref([])
function calculateDateRange () {
for(let year = props.latestDate; year >= props.earliestDate; year--){
validYears.value.push(year)
}
}
我没有提供其余代码以免使问题变得混乱,但正如人们在此组件中看到的那样,我有一组道具来确定我的 for 循环中的值。
解决方案
您可以按如下方式对其进行优化:
const validYears = computed(()=>{
let _years=[]
for(let year = props.latestDate; year >= props.earliestDate; year--){
_years.push(year)
}
return _years;
})
推荐阅读
- php - Laravel 将变量共享给自定义中间件组中的视图
- angular - 试图从 Ionic Angular 中的 Firebase 获取对象
- php - 在三个表的查询中。如何在 SQL 中获得一组团队及其成员
- c++ - 我将如何编码以便计算机知道两个名称条目和三个名称条目之间的区别?
- asp.net-core - ASP.NET Core 中的 BuildManager.GetCompiledType
- javascript - 有什么方法可以使 Ionic 4 文本可选?
- python - Expedia的Python网页抓取,如何找到正确的关键字
- python - 删除特殊字符并用“-”替换空格
- php - 从数组php中提取值
- sql - 如何在 TYPE Oracle 中动态创建列