DEV Community

Cover image for Filtering Data Di Vue
MedanInCode
MedanInCode

Posted on • Originally published at medanincode.com

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"
   }
]
Enter fullscreen mode Exit fullscreen mode

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.

<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>
Enter fullscreen mode Exit fullscreen mode

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

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'
      })
    }
  }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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;
      });
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)