Возвращаемые значения из массива объектов метода

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

Возможно, вы неправильно указали структуру своего объекта, функции должны быть записаны в объекте как a: () => (), поэтому решение вашего вопроса будет выглядеть примерно так: https://codepen.io/mohithg/pen/VGEjrV?editors=1011

Answer 2

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

Это должно работать в вашем случае