Filtering Data Di Vue

Tutorial kali ini akan membahas bagimana jika kita ingin memfilter data dengan vue.Karena disini kita akan menggunakan directive v-for dan v-if ada baiknya teman-teman membaca dahulu disini.
Percabangan Di Vue Js

Perulangan Di Vue Js

Misalnya kita punya data seperti dibawah ini.

products:[
   {
      name:"dress zara",
      gender:"wanita",
      size:"S"
   },
   {
      name:"baju offwhite",
      gender:"pria",
      size:"L"
   }
]

Kita akan mencoba memfilter data yang akan tampil berdasarkan jenis kelamin.Disini kita akan menggunakan beberapa cara.

v-if
computed
methods

Menggunakan v-if

Untuk penggunaan dengan v-if kurang lebih seperti kode dibawah ini.

<h1>Pakaian pria</h1>
<ul>
  <li v-for="product in products" v-if="product.gender==='pria'">
    {{ product.name }}
  </li>
</ul>
<h1>Pakaian wanita</h1>
<ul>
  <li v-for="product in products" v-if="product.gender==='wanita'">
    {{ product.name }}
  </li>
</ul>

Bisa dilihat pada code diatas kita cukup menambahkan v-if dengan kondisi jika object dengan key gender sesuai dengan jenis kelamin yang kita tentukan.

Maka akan didapatkan hasil seperti dibawah ini.

Menggunakan properti computed

Untuk penggunaan dengan properti computed bisa dilihat pada kode dibawah.

data: () => {
    return {
      products: [
        {
          name: "dress zara",
          gender: "wanita",
          size: "S"
        },
        {
          name: "baju offwhite",
          gender: "pria",
          size: "L"
        }
      ]
    };
  },
  computed:{
    produkPria:function(){
      return this.products.filter(function (data) {
        return data.gender === 'pria'
      })
    },
    produkWanita:function(){
      return this.products.filter(function (data) {
        return data.gender === 'wanita'
      })
    }
  }

Jika dilihat di kode diatas kita membuat dua buah fungsi masing-masing untuk memfilter data berdasarkan jenis kelamin.

Untuk htmlnya sendiri bisa dilihat dibawah,kita langsung membuat v-for berdasarkan fungsi yang terdapat pada properti computed.

<h1>Pakaian pria</h1>
<ul>
  <li v-for="product in produkPria">
    {{ product.name }}
  </li>
</ul>
<h1>Pakaian wanita</h1>
<ul>
  <li v-for="product in produkWanita">
    {{ product.name }}
  </li>
</ul>

Menggunakan properti methods

Dengan properti methods kita bisa membuat untuk kasus diatas menjadi 1 fungsi saja.Berbeda dengan computed karena computed memiliki parameter.

data: () => {
    return {
      products: [
        {
          name: "dress zara",
          gender: "wanita",
          size: "S"
        },
        {
          name: "baju offwhite",
          gender: "pria",
          size: "L"
        }
      ]
    };
  },
methods: {
    pakaian: function(gender) {
      return this.products.filter(function(data) {
        return data.gender === gender;
      });
    }
}

Pada kode diatas isi fungsi kurang lebih sama seperti yang kita gunakan pada parameter hanya berbeda di parameter.Untuk datanya kita berikan sesuai dengan parameter.

Untuk htmlnya seperti dibawah ini.

<h1>Pakaian pria</h1>
<ul>
  <li v-for="product in pakaian('pria')">{{ product.name }}</li>
</ul>
<h1>Pakaian wanita</h1>
<ul>
  <li v-for="product in pakaian('wanita')">{{ product.name }}</li>
</ul>

Kita cukup memanggil methods tersebut di v-for dengan parameter gender.

Sekian dulu pembahasan mengenai filtering data,jika ada yang kurang dipahami,silahkan tanyakan dibawah.

Blog

Filtering Data Di Vue

MedanInCode

Menggunakan v-if

Menggunakan properti computed

Menggunakan properti methods

Join Our Newsletter. No Spam, Only the good stuff.

Related