[Vuejs]-How do I create a filter that will return the desired card from the JSONArray array?

by

0👍

✅

If I understood you correctly try like following snippet, with computed property and method:

const brand = [{"id": 1, "title": "Brand 1", "sort": "100", "code": "brand_1"}, {"id": 2, "title": "Brand 2", "sort": "200", "code": "brand_2"}]
const items = [{"type": "simple", "id": 1, "sku": "s1", "title": "Product 1", "regular_price": {"currency": "USD", "value": 27.12}, "image": "/images/1.png", "brand": 1}, {"type": "simple", "id": 2, "sku": "s1", "title": "Product 2", "regular_price": {"currency": "USD", "value": 37.88}, "image": "/images/1.png", "brand": 2}, {"type": "simple", "id": 3, "sku": "s1", "title": "Product 3", "regular_price": {"currency": "USD", "value": 39.77}, "image": "/images/1.png", "brand": 2}]
const app = Vue.createApp({
  data: () => ({
    brand,
    items,
    filteredBrand: null,
  }),
  computed: {
    filteredItems() {
      return this.filteredBrand ? this.items.filter(i => i.brand === this.filteredBrand) : this.items
    }
  },
  methods: {
    filterByBrand(brand = null) {
      this.filteredBrand = brand
    }
  }
})
app.mount('#demo')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="nav">
    <span class="btn btn-primary" @click="filterByBrand()"> All brands</span>
    <div class="btn btn-secondary" v-for="(item, id) in brand" :key="id" @click="filterByBrand(item.id)">{{ item.title }}</div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col" v-for="(item, id) in filteredItems" :key="id">
        <br> {{ item.title }} <br> brand {{ item.brand }} <br> ${{ 
       item.regular_price.value }}
        <div class="btn me-md-2" id="btn" @click="$emit('addToCart', value)"> 
          Add to cart
        </div>
      </div>
    </div>
  </div>
</div>

Leave a comment