Vue Mixins for Component

Vue Mixins for Component demo by http://qcode.in

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
 <foo></foo>
 <bar></bar>
</div>

JavaScript

// Helpers
function dateRangeFormat(data = []) {
  if (data.length) {
    const start = DateTime.fromJSDate(data[0]);
    const end = DateTime.fromJSDate(data[1]);

    return {
      beginDate: DateTime.utc(start.year, start.month, start.day)
      .startOf('day')
      .toISO(),
      endDate: DateTime.utc(end.year, end.month, end.day)
      .endOf('day')
      .toISO(),
    };
  }

  return false;
}

Vue.component('foo', {
  template: '<div>foo: {{dateRangeFormat}}</div>',
  data() {
    return {
      DataTimeMain: []
    }
  },
  computed: {
    dateRangeFormat() {
      return dateRangeFormat(this.DataTimeMain)
    }
  }
});

Vue.component('bar', {
  template: '<div>bar: {{dateRangeFormat}}</div>',
  data() {
    return {
      DataSecond: []
    }
  },
  computed: {
    dateRangeFormat() {
      return dateRangeFormat(this.DataSecond)
    }
  }
});

new Vue({
  el: '#app'
})