Question

我正在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 }}，但它也不起作用。

Answer 1

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

这应该适合您的情况

Answer 2

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

从方法对象数组返回值

2 个答案: