从方法对象数组返回值

Question

I'm building a date range picker in Vue.js and I have created an array of methods of preset ranges

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')
      }
    }
  },
}

In a for loop, I want to display each method's returned label. The following code is what I used to do, but apparently it doesn't work anymore?

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

I have also tried {{ item().label }} and it doesn't work either.

Answer 1

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

This should work in your case

Answer 2

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