JSFiddle - React, Tailwind, and code Playground

by Tuan Truong

HTML

<div id="app">
  <button @click="filter('In')">Sort By Income</button>
   <div v-for="payment in payments">
    
   </div>
</div>

CSS

button {
  margin-bottom: 20px;
}

Vue

new Vue({
	el: '#app',
  data: {
		payments: [
     {
     	  "id": "ARM2JAE",
        "contractId": "1GJAN32",
        "contractName": "Vehikl",
        "direction": "In",
        "currencyCode": "2",
        "currency": "US Dollars",
        "amount": "1000.00",
        "payToAccountId": "HSN23JS",
        "receiveFromAccountId": "JUEH837",
        "paymentDate": "01/06/2017",
        "paymentInstruction": "Wired",
        "statusId": "3KSH2HD",
        "status": "scheduled",
        "notificationDate": "01/02/2017",
        "contractType": "CPO"
     },
     {
     	  "id": "ARM2JAE",
        "contractId": "1GJAN32",
        "contractName": "Vehikl",
        "direction": "Out",
        "currencyCode": "2",
        "currency": "US Dollars",
        "amount": "1000.00",
        "payToAccountId": "HSN23JS",
        "receiveFromAccountId": "JUEH837",
        "paymentDate": "01/06/2017",
        "paymentInstruction": "Wired",
        "statusId": "3KSH2HD",
        "status": "scheduled",
        "notificationDate": "01/02/2017",
        "contractType": "CPO"
     },
     
    ]
  },
  methods: {
  	filter(direction) {
    	this.filterText = direction;
    }
  }
})