JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="container">
  <div class="row">
    <div id="app">
      <div v-for="product in filteredProducts" :key="product.id" class="col-md-4">

        <div :style="{ display: [product.display] }">

          <h3>{{product.title}}</h3>
          <button class="btn btn-md btn-danger" @click="selectPrd(product)">Remove {{product.id}}</button>
        </div>
      </div>

    </div>
  </div>
</div>

JavaScript

new Vue({

  el: "#app",
  name: "App",
  data: {
    selectedProduct: null,
    hiddenPrd: [],
    products: [{
        "id": 1,
        "title": "iPad 4 Mini",
        "price": 500.01,
        "inventory": 2,
        "rules": [3, 2, 1],
        "display": "block"
      },
      {
        "id": 2,
        "title": "H&M T-Shirt White",
        "price": 10.99,
        "inventory": 10,
        "rules": [3],
        "display": "block"
      },
      {
        "id": 3,
        "title": "Chafvddvgrli XCX - Sucker CD",
        "price": 19.99,
        "inventory": 5,
        "rules": [0],
        "display": "block"
      },
      {
        "id": 4,
        "title": "Charlirtgrtg XCX - Sucker CD",
        "price": 19.99,
        "inventory": 5,
        "rules": [0],
        "display": "block"
      },
      {
        "id": 5,
        "title": "Charrtgrtgrthzzli XCX - Sucker CD",
        "price": 19.99,
        "inventory": 5,
        "rules": [0],
        "display": "block"
      },
      {
        "id": 6,
        "title": "Charrtgrtgrthzzli XCX - Sucker CD",
        "price": 19.99,
        "inventory": 5,
        "rules": [0],
        "display": "none"
      }
    ]

  },
  computed: {
    filteredProducts() {
      if (!this.hiddenPrd) return this.products
      return this.products.filter(prd => {
        return !this.hiddenPrd.includes(prd.id)
      });
    }
  },
  methods: {
    selectPrd(prd) {
      if(!this.hiddenPrd.length) this.hiddenPrd = prd.rules
      else this.hiddenPrd = this.hiddenPrd.filter(( el ) => !prd.rules.includes( el ) );
    }
  }
});