JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

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

JavaScript

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

var testData = [
	{small: false, text: "Small false 1"},
  {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}});