[Vuejs]-Filtering items using a condition (vue.js)

by

1👍

✅

computed: {
  filteredProducts() {
    return this.products.filter(x => x.name === this.loggedUser[0].text); // text or user, whichever field is for username
  },
},

After that show the list in html use v-for.

<p v-if="filteredProducts.length === 0">No products found</p>
<li v-for="(product, key) in filteredProducts" :key="key">Product: {{ product.description }}, Price {{ product.price }} <button @click="deleteProduct(key)">Delete</button></li>

add delete method

methods: {
 // ...
 deleteProduct(index) {
        this.products.splice(index, 1);
 },
}
👤prisar

0👍

I think this may work from you (given what you have provided above)

computed: {
  filteredProducts () {
    return this.products.filter(function (item) {
      return (item.name === this.loggedUser[0].name)
    }
  }
}

Basically, we are filtering the products based on the name that is tagged on that list with the loggedUser name.

Hope this helps.

👤Angelo

Leave a comment