使用条件过滤项目（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名称标记的名称过滤产品。

希望这可以帮助。