[Vue] - Creating a Collection List Component in Vue

Learn how to create a Vue.js component to list all entires from a mongodb collection

👩‍💻 Technical question

Asked 2 years ago in Vue by Rene

Write a vue.js component that lists all entries from a collection in a mongodb database.

🤖 SheCodes Athena says:

Answered in 9.01 seconds

vue
  Copy code
<template>
  <div>
    <ul>
      <li v-for="entry in entries" :key="entry._id">
          {{ entry.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { databaseCollection } from 'yourdatabase.js'

export default { 
  name: 'CollectionList',
  data () {
    return {
      entries: []
    }
  },
  created: function() {
    databaseCollection.find({}).toArray((err, entries) =>{
      this.entries = entries
    })
  }
}

Browse coding questions by topics: HTML CSS JavaScript VS Code Python React Bootstrap Tailwind Java PHP Node.js Ruby Go .NET