JSFiddle - React, Tailwind, and code Playground

by Tuan Truong

HTML

<div id="app">
  <button @click="paymentFitler = 'all'">All</button>
  <button @click="paymentFitler = 'in'">Income</button>
  <div v-for="payment in paymentFilter">
    <p>{{ payment }}</p>
  </div>

</div>

Vue

new Vue({
	el: '#app',
  data: {
  	paymentFilterKey: 'all',
		payments: [
        {
          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"
      },
      {
      		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"
          
      }
    ]
  },
  computed: {
  	paymentFilter() {
    	return this[this.paymentFilterKey];
    },
  	all() {
    	return this.payments;
    },
    in() {
    	return this.payments.filter((payment) => payment.direction === 'In')
    }
  }
});