Vue.js Compute

by jessekinsman

HTML

<div id="compContainer">
  <test-compute v-bind:collection="testData"></test-compute>
</div>

JavaScript

Vue.component('test-compute', {
	props: ['collection'],
  computed: {
  	onlySmall: function() {
    	return this.collection.filter(function(item){
      	return item.small == true;
      })
    }
  },
  template: `
  <div>
  	<div class="container" v-for="item in onlySmall">
    	<p>{{item.text}}</p>
    </div>
    </div>
  `
});

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