Filtering Data Di Vue
Tags: tutorial, vue, javascript
Published: 2022-01-16 11:35:06

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](https://dev.to/medan_in_code/percabangan-di-vue-js-2j3d)  
[Perulangan Di Vue Js](https://dev.to/medan_in_code/perulangan-di-vue-js-1j0a)

Misalnya kita punya data seperti dibawah ini.

```javascript
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.

1. **v-if**
2. **computed**
3. **methods**

##### Menggunakan v-if

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

```html
<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.


![Filter Data Vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyrwhg5u4pf63tit0oil.png)

##### Menggunakan properti computed

Untuk penggunaan dengan properti **computed** bisa dilihat pada kode dibawah.

```javascript
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**.
```html
<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.

```javascript
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.

```html
<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.