Vue JS - 遍历计算属性以显示年份列表

Posted 2023-02-23

【中文标题】Vue JS - 遍历计算属性以显示年份列表

【英文标题】：Vue JS - Loop through a computed property to display a list of years

【发布时间】：2021-10-08 13:44:03

【问题描述】：

我目前有以下列出年份列表的代码。我觉得所有这些代码可能都是非常不必要的，也许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 循环中的值的道具。

【参考方案1】：

您可以按如下方式对其进行优化：

const validYears = computed(()=>
    let _years=[]
    for(let year = props.latestDate; year >= props.earliestDate; year--)
        _years.push(year)
      
 
  return _years;

)