composition api setup + items sort

Author: vedees

src/App.vue

@@ -14,33 +14,35 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import Form from '@/components/Form'
 import List from '@/components/List'
+
 export default {
   components: { Form, List },
-  data() {
+  setup() {
+    const items = ref([
+      {
+        id: 1,
+        body: 'hello vue 3',
+        likes: 12,
+        avatar: `https://avatars.dicebear.com/api/male/1.svg`,
+        date: new Date(Date.now()).toLocaleString()
+      },
+      {
+        id: 2,
+        body: 'hello world',
+        likes: 6,
+        avatar: `https://avatars.dicebear.com/api/male/2.svg`,
+        date: new Date(Date.now()).toLocaleString()
+      }
+    ])
+    const handleSubmit = item => items.value.push(item)
+
     return {
-      items: [
-        {
-          id: 1,
-          body: 'hello vue 3',
-          likes: 12,
-          avatar: `https://avatars.dicebear.com/api/male/1.svg`,
-          date: new Date(Date.now()).toLocaleString()
-        },
-        {
-          id: 2,
-          body: 'hello world',
-          likes: 6,
-          avatar: `https://avatars.dicebear.com/api/male/2.svg`,
-          date: new Date(Date.now()).toLocaleString()
-        }
-      ]
-    }
-  },
-  methods: {
-    handleSubmit(item) {
-      this.items.push(item)
+      items,
+      handleSubmit
     }
   }
 }

src/components/Form.vue

@@ -6,25 +6,26 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 export default {
-  data() {
-    return {
-      body: ''
-    }
-  },
-  methods: {
-    onSubmit() {
-      this.$emit('onSubmit', {
+  emits: ['onSubmit'],
+
+  setup(_, { emit }) {
+    const body = ref('')
+
+    const onSubmit = () => {
+      emit('onSubmit', {
         id: Math.round(Math.random() * 30),
         avatar: `https://avatars.dicebear.com/api/male/${Date.now()}.svg`,
-        body: this.body,
+        body: body.value,
         likes: 0,
         date: new Date(Date.now()).toLocaleString()
       })
-
-      // reset
-      this.body = ''
+      body.value = ''
     }
+
+    return { body, onSubmit }
   }
 }
 </script>

src/components/List.vue

@@ -1,10 +1,15 @@
 <template>
+  <select v-model="sortBy">
+    <option value="date">Sort by date</option>
+    <option value="likes">Sort by like</option>
+  </select>
   <ul class="tweets__wrapper">
-    <Item v-for="item in items" :key="item.id" :item="item" />
+    <Item v-for="item in sorteredItems" :key="item.id" :item="item" />
   </ul>
 </template>
 
 <script>
+import { ref, computed } from 'vue'
 import Item from '@/components/Item.vue'
 
 export default {
@@ -14,6 +19,18 @@ export default {
       type: Array,
       reqired: true
     }
+  },
+  setup({ items }) {
+    const sortBy = ref('date')
+
+    const sorteredItems = computed(() => {
+      return items.sort((a, b) => {
+        if (a[sortBy.value] > b[sortBy.value]) return -1
+        if (a[sortBy.value] < b[sortBy.value]) return 1
+      })
+    })
+
+    return { sortBy, sorteredItems }
   }
 }
 </script>