从方法对象数组返回值答案

【问题标题】：Return values from an array of method objects从方法对象数组返回值
【发布时间】：2018-09-17 13:38:51
【问题描述】：

我正在 Vue.js 中构建一个日期范围选择器，并创建了一组预设范围的方法

presetRanges:{
  last7Days(){
    return{
      label: 'Last 7 days',
      dateRange:{
        start: this.$moment(today).substract(7, 'd')
      }
    }
  },
  last30Days(){
    return{
      label: 'Last 30 days',
      dateRange:{
        start: this.$moment(today).substract(30, 'd')
      }
    }
  },
  last60Days(){
    return{
      label: 'Last 60 days',
      dateRange:{
        start: this.$moment(today).substract(60, 'd')
      }
    }
  },
}

在 for 循环中，我想显示每个方法的返回标签。下面的代码是我以前做的，但是貌似不行了？

<li v-for="(item, idx) in presetRanges" :key="idx">"
  {{ item.label }} 
</li>

我也尝试过{{ item().label }}，但它也不起作用。

【问题讨论】：

你需要用() 创建你的对象吗？他们不应该看起来像 last7Days{ 没有括号吗？
您可能不希望您的 last7Days 等成为函数，而最好将每个 dateRange 设为函数。实际上，您的标签不是对象属性，而是 JavaScript 标签。您缺少一对花括号来返回一个对象。
抱歉，我的代码中确实有返回，但它仍然无法正常工作。我现在将更新帖子的代码

标签： javascript vue.js ecmascript-6

【解决方案1】：

您可能弄错了对象的结构，函数应该在对象中写为a: () => ()，因此您的问题的解决方案类似于https://codepen.io/mohithg/pen/VGEjrV?editors=1011

【讨论】：

如果在对象中使用 () => 写，我就无法使用this.$moment()
你是对的。我的对象结构是错误的。我已经更新了它，就像你给我的例子一样，现在它正在工作。谢谢！

【解决方案2】：

<li v-for="range in presetRanges">
  {{ range.label }} 
</li>

这应该适用于您的情况

【讨论】：