Vue

by azureternite

HTML

<div id="app">
  <div>
    Date range: {{ dateRange }}<br/>
    Computed getter triggered: {{ count }}<br/>
    <button @click="handleChangeObject">Change the whole object</button>
    <button @click="handleChangeProperty">Change object property</button>
    <button @click="handleChangeStartDate">Change start date</button>
    <button @click="handleChangeEndDate">Change end date</button>
  </div>
</div>

Vue

new Vue({
  el: "#app",
  data () {
  	return {
    	count: 0,
      
      date: {
      	start: null,
        end: null,
      },
    }
  },
  computed: {
  	dateRange () {
    	this.count++
      /* this.date.start */
      /* this.date.end */
    	return this.date
    },
  },
  methods: {
  	handleChangeObject () {
    	this.date = {
      	start: new Date(),
        end: new Date(),
      }
    },
    
    handleChangeProperty () {
    	this.date.start = new Date()
      this.date.end = new Date()
    },
    
    handleChangeStartDate () {
    	this.date.start = new Date()
    },
    
    handleChangeEndDate () {
    	this.date.end = new Date()
    },
  }
})