add dirictives

src/components/PostForm.vue

@@ -2,6 +2,7 @@
   <form @submit.prevent="submit">
     <h4>Создание поста</h4>
     <my-input
+        v-focus
         v-model="formState.title"
         class="input"
         type="text"

src/dirictives/VFocus.js

@@ -0,0 +1,6 @@
+export default {
+  name: 'focus',
+  mounted(el) {
+    el.focus()
+  }
+}

src/dirictives/VIntersection.js

@@ -0,0 +1,20 @@
+export default {
+  name: 'intersection',
+  mounted(el, binding) {
+    const { loadMorePost } = binding.value;
+
+    const options = {
+      rootMargin: "0px",
+      threshold: 1.0,
+    };
+
+    const callback = (entries) => {
+      if (entries[0].isIntersecting) {
+        loadMorePost();
+      }
+    };
+    const observer = new IntersectionObserver(callback, options);
+
+    observer.observe(el)
+  }
+}

src/dirictives/index.js

@@ -0,0 +1,7 @@
+import VFocus from '@/dirictives/VFocus';
+import VIntersection from '@/dirictives/VIntersection';
+
+export default [
+  VFocus,
+  VIntersection
+]

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App';
 
 import components from '@/components/ui';
+import dirictives from '@/dirictives';
 import router from '@/router/router';
 
 const app = createApp(App);
@@ -10,6 +11,11 @@ components.forEach(component => {
   app.component(component.name, component)
 })
 
+dirictives.forEach(dirictive => {
+  app.directive(dirictive.name, dirictive)
+})
+
+
 app
   .use(router)
   .mount('#app')

src/pages/PostsPage.vue

@@ -2,7 +2,7 @@
   <div>
     <h1>Страница постов</h1>
 
-    <my-input v-model="searchQuery" placeholder="Поиск" class="search"/>
+    <my-input v-focus v-model="searchQuery" placeholder="Поиск" class="search"/>
 
     <div class="app__btns">
       <my-button @click="showCreateDialog" class="createBtn">
@@ -18,7 +18,7 @@
 
     <div v-if="isPostLoading" style="margin-top: 15px">Loading...</div>
     <post-list v-else :posts="sortedAndSearchedPosts" @removePost="removePost" class="postList"/>
-    <div ref="observer" class="observer"></div>
+    <div v-intersection="getIntersectionData()" ref="observer" class="observer"></div>
 <!--    <my-pagination-->
 <!--      :currentPage="page"-->
 <!--      :totalPages="totalPages"-->
@@ -95,6 +95,13 @@ export default {
         alert(e.message);
       }
     },
+    getIntersectionData() {
+      return {
+        loadMorePost: this.loadMorePost,
+        page: this.page,
+        totalPages: this.totalPages,
+      }
+    }
     // changePage(newPage) {
     //   this.page = newPage;
     // }
@@ -103,23 +110,6 @@ export default {
     this.isPostLoading = true;
     await this.fetchPosts()
     this.isPostLoading = false
-
-
-    console.log();
-
-    const options = {
-      rootMargin: "0px",
-      threshold: 1.0,
-    };
-
-    const callback = (entries) => {
-      if (entries[0].isIntersecting && this.page < this.totalPages) {
-        this.loadMorePost();
-      }
-    };
-    const observer = new IntersectionObserver(callback, options);
-
-    observer.observe(this.$refs.observer)
   },
   computed: {
     sortedPost() {