title: How do you handle multiple Firebase collections within one Vue component?
body: <p>I have one component called index.
  This index has two sections: a banner section and news section.
  Each these sections have their own Firebase collection, which include stuff like headlines and text that the user is able to enter, edit and delete. Each collection has their seperate create/edit pages.</p>
  <p>My problem is that I only know how to get and delete data from ONE database table in a component, but here I have a component that hosts data from TWO database tables.
  How do I get this to work?</p>
  <p>Here is what I tried so far.</p>
  <pre><code>&lt;script&gt;
  import db from '@/firebase/init'
  export default {
    name: 'Index',
    data () {
      return {
        file: [],
        news_section: [],
        banner_section: []
      }
    },
    methods: {
      deleteText(id) {
        db.collection('news_section' + 'banner_section').doc(id).delete()
        .then(() =&gt; {
  
          this.news_section = this.news_section.filter(news =&gt; {
          return news.id != id
        }),
          this.banner_section = this.banner_section.filter(banner =&gt; {
          return banner.id != id
          })
        })
      }
    },
    created() {
      db.collection('news_section' + 'banner_section').get()
      .then(snapshot =&gt; {
        snapshot.forEach(doc =&gt; {
          let news, banner = doc.data()
          news.id, banner.id = doc.id
          this.news_section.push(news)
          this.banner_section.push(banner)
        })
      })
    }
  }
  &lt;/script&gt;
  </code></pre>