Vue component over-complication

Question

I'm building a date range selector, and while this works, I feel like I'm making it more complicated than it needs to be. Is there a more elegant way of writing this?

Possibly using computed values or watches?

<template>
<form>
    <select  @change="rangeSelection">           
            <option 
                v-for="(option, key) in rangeOptions"
                :key="key"
                :value="key">
                {{option.display}}
            </option>
    </select>
    </form>
</template>

<script>
import moment from 'moment';

export default {
  name: 'DateRangeChooser',
  data: () => {
    return {
        selectedRange: "last7Days",
        startDate: moment().subtract(8, 'days'),
        endDate: moment().subtract(1, 'days'),
        rangeOptions: {
            last7Days: {
                display: 'Last 7 Days',
                startDate: moment().subtract(8, 'days'),
                endDate: moment().subtract(1, 'days')
            },
            lastWeek: {
                display: 'Last Week',
                startDate: moment().startOf('week').subtract(1, 'week'),
                endDate: moment().endOf('week').subtract(1, 'week')
            },
            last30days: {
                display: 'Last 30 days',
                startDate: moment().subtract(31, 'days'),
                endDate: moment().subtract(1, 'days')
            }
        }
    }
  },  
  methods: {
    rangeSelection: function(e){
        this.endDate = this.rangeOptions[e.currentTarget.value].endDate;
        this.startDate = this.rangeOptions[e.currentTarget.value].startDate;
    }
  }
};
</script>

Answer 1

Yes you can use computed properties:

computed: {
    endDate: function() {
      //determine endDate based on value of selectedRange
    },
    startDate: function() {
      //determine startDate based on value of selectedRange
    }
}

And v-model can be used to bind the value of the select list to that data property:

<select v-model="selectedRange">

Then use that property in the computed properties:

  computed: {
    endDate: function() {
      return this.rangeOptions[this.selectedRange].endDate;
    },
    startDate: function() {
      return this.rangeOptions[this.selectedRange].startDate;
    }
  }

With this approach there is no need to define the rangeSelection method and bind it to the onchange property.

rangeOptions could also be moved outside the component, and then the first key could be used to select the default value of selectedRange instead of hard coding it. See the snippet below.

const rangeOptions = {
  last7Days: {
    display: 'Last 7 Days',
    startDate: moment().subtract(8, 'days'),
    endDate: moment().subtract(1, 'days')
  },
  lastWeek: {
    display: 'Last Week',
    startDate: moment().startOf('week').subtract(1, 'week'),
    endDate: moment().endOf('week').subtract(1, 'week')
  },
  last30days: {
    display: 'Last 30 days',
    startDate: moment().subtract(31, 'days'),
    endDate: moment().subtract(1, 'days')
  }
};
const form = new Vue({
  el: '#DateRangeChooser',
  data: () => {
    return {
      selectedRange: Object.keys(rangeOptions)[0],
      rangeOptions
    }
  },
  computed: {
    endDate: function() {
      return rangeOptions[this.selectedRange].endDate;
    },
    startDate: function() {
      return rangeOptions[this.selectedRange].startDate;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="DateRangeChooser">
  <select v-model="selectedRange">
    <option v-for="(option, key) in rangeOptions" :key="key" :value="key">
      {{option.display}}
    </option>
  </select>
  <div>Start: {{startDate.format('LL')}}</div>
  <div>End: {{endDate.format('LL')}}</div>
</div>

Edit

@blindman67 brought up an interesting point:

Sorry my VUE knowledge is limited but I thought computed properties were cached. Could be a problem in some edge cases, eg time near midnight and user selects, then changes their mind waits till after midnight selects again?¹

That is true:

... computed properties are cached based on their dependencies²

if caching is an issue, then you may need to look at using a watcher or just calculate the computed property each time instead of referencing values within this.rangeOptions.

¹_{Vue component over-complication}

²_{https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods}