Vue.js Compute

by jessekinsman

HTML

<div id="compContainer">
  <div v-for="item in testData">
    <test-compute v-bind:item="item"></test-compute>
  </div>
</div>

JavaScript

Vue.component('test-compute', {
	props: ['item'],
  computed: {
    formatDate: function() {
    	var dt = new Date(this.item.updatedAt);
      return dt.toDateString();
    }
  },
  template: `
  <div>
  	<div class="container">
    	<p>{{item.text}} <strong>Date: </strong>{{formatDate}}</p>
    </div>
    </div>
  `
});

var testData = [
	{small: false, text: "Small false 1", updatedAt: 1558729871918},
  {small: true, text: "Small true 1", updatedAt: 1542840193473},
  {small: false, text: "Small false 2", updatedAt: 1542841969171},
  {small: false, text: "Small false 3", updatedAt: 1542841995792},
  {small: true, text: "Small true 2", updatedAt: 1542841995792},
  {small: false, text: "Small false 4", updatedAt: 1542840824567}
];
new Vue({el: '#compContainer', data:{testData: testData}});