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

I don't understand how to create a filter that will return the desired card from an array if the buttons are also an array JSON array. By clicking on the button with the value attached to it, find a matching value in another array and return this card

//brand.json  [
{
  "id": 1,
  "title": "Brand 1",
  "sort": "100",
  "code": "brand_1"
},
{
  "id": 2,
  "title": "Brand 2",
  "sort": "200",
  "code": "brand_2"
}
//items.Json
 [
{
  "type": "simple",
  "id": 1,
  "sku": "s1",
  "title": "Product 1",
  "regular_price": {
    "currency": "USD",
    "value": 27.12
  },
  "image": "/images/1.png",
  "brand": 9
  },
  Code: 
    <div >
        <span > All brands</span>
        <hr />
        <div  v-for="(item, id) in brand" :key="id" @click="filter">{{ item.title 
     }}</div>
    </div>

    <div >
    <div >
        <div  v-for="(item, id) in items" :key="id">
            <img src="./logo.png" >
            <br> {{ item.title }} <br> brand {{ item.brand }} <br> ${{ 
           item.regular_price.value }}
            <div  id="btn"    @click="$emit('addToCart', value)"> Add to 
           cart</div>
           </div>
        </div>
         </div>
    <script>
      import brand from '@/components/brand.json';
  import items from '@/components/items.json';
  export default {
    name: "App",
    data: () => ({
    brand,
    items,
    filteredBrand: [],
}),
} </script>

CodePudding user response：

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/[email protected]/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 >
    <span  @click="filterByBrand()"> All brands</span>
    <div  v-for="(item, id) in brand" :key="id" @click="filterByBrand(item.id)">{{ item.title }}</div>
  </div>
  <div >
    <div >
      <div  v-for="(item, id) in filteredItems" :key="id">
        <br> {{ item.title }} <br> brand {{ item.brand }} <br> ${{ 
       item.regular_price.value }}
        <div  id="btn" @click="$emit('addToCart', value)"> 
          Add to cart
        </div>
      </div>
    </div>
  </div>
</div>