Vue

by tyminko

HTML

<div id="app">
  <h2>Select your period:</h2>
  <date-range-selector v-model="drs"></date-range-selector>
  <p>Selected period: {{ drs.periodName }}</p>
  <p>Dates: {{ drs.dateStartHuman }} to {{ drs.dateStopHuman }}</p>
</div>

CSS

body {
  padding: 10px;
  font-family: Helvetica;
}

#app {}

input {
  margin-bottom: 20px;
}

Vue

Vue.component('date-range-selector', {
  template: `<input v-model="key">`,
  props: { value: Object },
  data: () => ({ key: '' }),
  watch: {
	  value () { this.key = this.value.key },
  	key () { this.returnResults()	}
  },
  created () {
	  this.key = this.value.key
	  this.returnResults()
  },
 	computed: {
    periodName () { return this.key },
    dateStartHuman () { return `When ${this.key} starts` },
    dateStopHuman () { return `When ${this.key} stops` }
  },
 
  methods: {
    returnResults () {
      this.$emit('input', {
        key: this.key,
        periodName: this.periodName, 
        dateStartHuman: this.dateStartHuman,
        dateStopHuman: this.dateStopHuman
      })
    }
  }
})

new Vue({
  el: "#app",
  data: () => ({ 
  	drs: {key: 'realtime'} 
  })
})