Question

我只想显示Firebase中特定类型的博客内容。在数据库中，每个博客都有标题，类型和内容。有些博客的类型相同，例如，有些博客可能涉及狗，有些博客可能涉及猫。

我能够显示来自Firebase的博客内容，但我只想显示dogs类型的博客。

下面的代码的问题是，如果我在blogs_with_correct_genera中使用v-for，则会创建两个博客模板，但它们的内容为空，因为它没有和id属性。因为blogs_with_correct_genera仅具有两个dog类型的项目，所以创建了两个博客模板。

如果我将其更改为链接到数据库的“博客”，则可以获得博客的内容，但是它还会创建3个博客模板而不是2个模板，因为blogs有2个类型为dog的博客和1个博客猫的类型。

下面是调用方法getBlogOfType(param1,param2)

的html

      <b-card v-for="blog in blogs_with_correct_genera" title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top>
        <b-card-text>
          {{getBlogOfType("dog",blog.id)}}
        </b-card-text>
        <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
      </b-card>

下面是方法getBlogOfType(param1,param2)

    getBlogOfType (blog_type, doc_id) {
      var blogs_with_correct_type = []
      var blogs_doc_id = []

      for (var i=0; i <= this.blogs.length-1; i++){
        if (this.blogs[i].type == blog_type){
          blogs_with_correct_type.push(this.blogs[i].content);
          blogs_doc_id.push(this.blogs[i].id)
        }
      }
      this.blogs_with_correct_genera = blogs_with_correct_type
      //console.log(this.blogs_with_correct_genera)
      var location = blogs_doc_id.indexOf(doc_id)
      console.log(this.blogs[location])

      return this.blogs_with_correct_genera[location]
    }

如何修改代码，使其仅显示特定类型的博客，所以如果我调用方法getBlogOfType("dog")

，则仅显示狗的帖子。

Answer 1

如果我们可以看一下数据，那可能会更有意义。如果需要的条件足够琐碎，可以结合使用v-for and a v-if进行过滤。

如何使用Vue从数据库显示特定类型的内容

1 个答案: