✨ Delete data

components/firebase/feeds.vue

@@ -1,20 +1,41 @@
 <template>
-  <div>
-    <p v-for="ball in store.ballsInFeed" :key="ball.id">
-      <span> {{ ball.author_name }}:</span>
-      {{ ball.message }}
-    </p>
-  </div>
+  <virtual-list
+    class="virtual-list"
+    :class="{ filled: store.feedsInFeed.length }"
+    :size="56"
+    :remain="Math.min(5, store.feedsInFeed.length)"
+  >
+    <ul v-for="feed in store.feedsInFeed" :key="feed.id">
+      <li>{{ feed.message }}</li>
+      <button class="icon" @click="deleteFeed(feed)">
+        <i class="material-icons">delete</i>
+      </button>
+    </ul>
+  </virtual-list>
 </template>
 
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 284px);
+}
+</style>
+
 <script>
 import { store } from "../../functions/store";
 
 export default {
+  components: {
+    VirtualList: () => import("vue-virtual-scroll-list")
+  },
   data() {
     return {
       store
     };
+  },
+  methods: {
+    deleteFeed(feed) {
+      store.deleteFeed(feed.id);
+    }
   }
 };
 </script>