使用條件過濾項目（vue.js）

Question

現在解決了

問題

我正在嘗試制作一個可以做到這一點的過濾器。 從 session 存儲中獲取“名稱”並將其與產品上的“名稱”匹配。

我將所有“登錄”用戶數據存儲在“sessionStorage”中以供練習。
我將所有“產品”存儲在“localStorage”中

我只是把這個作為一個小項目來理解和實踐vue&js。

基本上如果產品是由用戶x創建的，在登錄時，用戶x應該只能看到他列出的產品，而不是產品的rest。

這是我能做的

我可以從 sessionStorage 獲取用戶信息，並且在創建產品時，用戶“名稱”與產品詳細信息一起傳遞。


我還可以從 localStorage 中檢索所有產品。

我不知道如何使用 vue.js 提出一個過濾器來做到這一點。

一些代碼示例真的可以幫助我理解發生了什么。

此外，我想在 html 中顯示結果。

提前致謝。

    },
    computed: {
        filteredProducts() {
            this.products.filter(x => x.name === this.loggedUser[0].user);
        }
    },

});```



  [1]: https://i.stack.imgur.com/W7PMf.png

Answer 1

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

之后使用v-for顯示 html 中的列表。

<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>

添加刪除方法

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

Answer 2

我認為這可能對您有用（鑒於您在上面提供的內容）

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

基本上，我們是根據在該列表中使用loggedUser名稱標記的名稱過濾產品。

希望這可以幫助。