formatted code for readability

src/App.vue

@@ -6,7 +6,6 @@
       <div class="uk-container uk-container-small">
         <verses />
         <options />
-
       </div>
     </div>
     <div v-if="loading" id="overlay">
@@ -15,25 +14,24 @@
       </div>
     </div>
   </div>
-
 </template>
 
 <script>
 // import _ from 'lodash';
 
-import UIkit from 'uikit';
+import UIkit from "uikit";
-import Icons from 'uikit/dist/js/uikit-icons';
+import Icons from "uikit/dist/js/uikit-icons";
-import {mapGetters} from 'vuex';
+import { mapGetters } from "vuex";
 
-import navbar from './components/NavBar.vue';
+import navbar from "./components/NavBar.vue";
-import options from './components/Options.vue';
+import options from "./components/Options.vue";
-import Selections from  './components/Selection.vue'
+import Selections from "./components/Selection.vue";
-import Verses from './components/Verses.vue'
+import Verses from "./components/Verses.vue";
 
 UIkit.use(Icons);
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
     navbar,
     options,
@@ -41,21 +39,20 @@ export default {
     Verses,
   },
   computed: {
-    ...mapGetters(['loading'])
+    ...mapGetters(["loading"]),
   },
   created() {
-    
+    this.$store.dispatch("initialise");
-    this.$store.dispatch('initialise')
+    console.log("Initialising");
-    console.log('Initialising');
     console.log(JSON.parse(JSON.stringify(this.$store.state)));
-  }
+  },
-}
+};
 </script>
 
 <style lang="less">
 @import "../node_modules/uikit/src/less/uikit.less";
 @import "../node_modules/uikit/src/less/uikit.theme.less";
-@global-link-color: #DA7D02;
+@global-link-color: #da7d02;
 @global-background: #f5f4f4;
 @primary: #55828b;
 @secondary: #fed18c;
@@ -69,10 +66,10 @@ export default {
 }
 .disabled {
   cursor: not-allowed;
-  color: gray
+  color: gray;
 }
 .disabled:hover {
-  color:gray 
+  color: gray;
 }
 #overlay {
   position: fixed;

src/components/Options.vue

@@ -1,137 +1,159 @@
 <template>
   <div class="uk-container">
-        
     <div class="uk-margin" uk-margin>
       <ul class="uk-pagination" v-if="chapter">
-                    <li @click="prev"><a class="text-primary" href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
+        <li @click="prev">
-                    <li class="uk-margin-auto-left" @click="next"><a class="text-primary" href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
+          <a class="text-primary" href="#"
+            ><span class="uk-margin-small-right" uk-pagination-previous></span>
+            Previous Chapter</a
+          >
+        </li>
+        <li class="uk-margin-auto-left" @click="next">
+          <a class="text-primary" href="#"
+            >Next Chapter<span
+              class="uk-margin-small-left"
+              uk-pagination-next
+            ></span
+          ></a>
+        </li>
       </ul>
     </div>
   </div>
 </template>
 <script>
-import _ from 'lodash';
+import _ from "lodash";
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
-import { BASE_URL, API_VERSION } from '../api/getbible_v2_api'
+import { BASE_URL, API_VERSION } from "../api/getbible_v2_api";
 
 export default {
-    components:{
+  components: {},
-    }, 
   data: function () {
     return {
       progress: 0,
       loading: false,
-
+    };
-            }},
+  },
   computed: {
     translations() {
       return this.$store.state.saved_translations;
     },
     saved_translations() {
       console.log(this.$store.state.saved_translations);
-            return this.$store.state.saved_translations
+      return this.$store.state.saved_translations;
     },
-        ...mapGetters(['chapters', 'chapter']),
+    ...mapGetters(["chapters", "chapter"]),
     fchapters: function () {
-            if(!this.search)
+      if (!this.search) return this.chapter.verses;
-            return this.chapter.verses
+      return this.filteredChapters;
-            return this.filteredChapters
     },
     filteredChapters() {
-            return _.orderBy(this.chapter.verses.filter((item) => 
+      return _.orderBy(
-                    item.verse.toString().toLowerCase().includes(this.search.toLowerCase())
+        this.chapter.verses.filter(
-                || item.chapter.toString().toLowerCase().includes(this.search.toLowerCase())
+          (item) =>
-                || item.name.toString().toLowerCase().includes(this.search.toLowerCase())
+            item.verse
-                || item.text.toLowerCase().includes(this.search.toLowerCase())), 'verse');
+              .toString()
+              .toLowerCase()
+              .includes(this.search.toLowerCase()) ||
+            item.chapter
+              .toString()
+              .toLowerCase()
+              .includes(this.search.toLowerCase()) ||
+            item.name
+              .toString()
+              .toLowerCase()
+              .includes(this.search.toLowerCase()) ||
+            item.text.toLowerCase().includes(this.search.toLowerCase())
+        ),
+        "verse"
+      );
     },
   },
   methods: {
     t(i) {
-            return this.translations.find(t =>  t.abbreviation === i)
+      return this.translations.find((t) => t.abbreviation === i);
     },
     next() {
       if (this.chapter < this.chapters.length)
-            this.$store.dispatch('set_chapter', this.chapter + 1)
+        this.$store.dispatch("set_chapter", this.chapter + 1);
     },
     prev() {
       if (this.chapter > 1)
-            this.$store.dispatch('set_chapter', this.chapter - 1)
+        this.$store.dispatch("set_chapter", this.chapter - 1);
     },
     async update_chapter() {
       // this.loading = true
-            this.progress = 95
+      this.progress = 95;
       let config = {
-            headers: {'Access-Control-Allow-Origin': '*'}
+        headers: { "Access-Control-Allow-Origin": "*" },
       };
 
-            let url =  `${BASE_URL}/${API_VERSION}/${this.translation}/${this.book}/${this.chapter_num}.json`
+      let url = `${BASE_URL}/${API_VERSION}/${this.translation}/${this.book}/${this.chapter_num}.json`;
 
       let response = await fetch(url, config).catch(function (err) {
-                    this.chapter = err
+        this.chapter = err;
-                    this.loading =false
+        this.loading = false;
-                    this.message = 'Error'
+        this.message = "Error";
-                    
       });
 
       if (!response) return;
 
-            this.progress = 99
+      this.progress = 99;
-            let data = await response.json().catch(err => {
+      let data = await response.json().catch((err) => {
-                                            this.chapter = err
+        this.chapter = err;
-                                            this.loading =false
+        this.loading = false;
-                                            this.message = 'Error'
+        this.message = "Error";
-                                        })
+      });
-            this.loading =false
+      this.loading = false;
 
       if (!data) return;
 
-            this.chapter = data
+      this.chapter = data;
-            this.progress =0
+      this.progress = 0;
-
-        },
-        async update_tr(){
-
     },
+    async update_tr() {},
     async update_bk() {
       let config = {
-            headers: {'Access-Control-Allow-Origin': '*'}
+        headers: { "Access-Control-Allow-Origin": "*" },
       };
-            this.loading =true
+      this.loading = true;
-            this.progress =25
+      this.progress = 25;
-            this.message = 'Loading...'
+      this.message = "Loading...";
-            let url = `${BASE_URL}/${API_VERSION}/${this.translation}/books.json`
+      let url = `${BASE_URL}/${API_VERSION}/${this.translation}/books.json`;
       fetch(url, config)
-            .then(response => response.json())
+        .then((response) => response.json())
-            .then(data => {
+        .then((data) => {
           // console.log(data)
-                this.books = data
+          this.books = data;
-                this.progress = 60
+          this.progress = 60;
           this.update_ch();
-            }).catch(function(err) {
+        })
-                this.chapter = err
+        .catch(function (err) {
-                this.loading =false
+          this.chapter = err;
-                this.message = 'Error'
+          this.loading = false;
+          this.message = "Error";
         });
-        
     },
     async update_ch() {
       let config = {
-            headers: {'Access-Control-Allow-Origin': '*'}
+        headers: { "Access-Control-Allow-Origin": "*" },
       };
-            fetch(`${BASE_URL}/${API_VERSION}/${this.translation}/${this.book}/chapters.json`,config)
+      fetch(
-            .then(response => response.json())
+        `${BASE_URL}/${API_VERSION}/${this.translation}/${this.book}/chapters.json`,
-            .then(data => {
+        config
+      )
+        .then((response) => response.json())
+        .then((data) => {
           // console.log(data)
-                this.chapters = data
+          this.chapters = data;
-                this.progress = 85
+          this.progress = 85;
           this.update_chapter();
-            }).catch(function(err) {
+        })
-                this.chapter = err
+        .catch(function (err) {
-                this.loading =false
+          this.chapter = err;
-                this.message = 'Error'
+          this.loading = false;
+          this.message = "Error";
         });
-        }
     },
-
+  },
-}
+};
 </script>

src/components/Picker.vue

@@ -7,34 +7,32 @@
         <input v-model="secondary"  type="color" name="" id="">
     </a> -->
     <label for="primary">Primary Color: </label>
-        <input v-model="primary" type="color"  name="primary" id="primary">
+    <input v-model="primary" type="color" name="primary" id="primary" />
     <br />
     <label for="secondary">Secondary Color: </label>
-        <input v-model="secondary"  type="color" name="secondary" id="secondary">
+    <input v-model="secondary" type="color" name="secondary" id="secondary" />
-    
   </div>
 </template>
 
 <script>
-import {dispatch} from 'vuex'
+import { dispatch } from "vuex";
 export default {
   data() {
     return {
-            primary: '#55828b',
+      primary: "#55828b",
-            secondary: '#fed18c'
+      secondary: "#fed18c",
-        }
+    };
   },
   methods: {
     updatePrimary() {
-            dispatch('primary', this.primary) 
+      dispatch("primary", this.primary);
     },
     updateSecondary() {
-            dispatch('secondary', this.secondary) 
+      dispatch("secondary", this.secondary);
-        }
+    },
-    }
+  },
-}
+};
 </script>
 
 <style>
-
 </style>

src/components/Search.vue

@@ -1,44 +1,89 @@
 <template>
-    
   <div id="offcanvas-slide" uk-offcanvas>
     <div class="uk-offcanvas-bar secondary text-secondary">
-
       <div class="uk-nav uk-nav-default">
         <div class="uk-margin">
           <form class="uk-search uk-search-default" action="javascript:void(0)">
             <!-- <span uk-search-icon></span> -->
-                                <input class="uk-search-input text-secondary primary rounded" v-model="search_text" type="search" placeholder="Search Words...">
+            <input
+              class="uk-search-input text-secondary primary rounded"
+              v-model="search_text"
+              type="search"
+              placeholder="Search Words..."
+            />
             <div class="uk-margin">
-                                    <button class="uk-button uk-button-default uk-button-small text-secondary primary rounded">Search</button>
+              <button
+                class="uk-button uk-button-default uk-button-small text-secondary primary rounded"
+              >
+                Search
+              </button>
             </div>
           </form>
-
         </div>
 
         <div class="uk-margin">
-
           <div class="uk-margin">
             <div class="uk-button-group text-primary">
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">ALL WORDS</button>
+              <button
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">ANY WORDS</button>
+                class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">PHRASE</button>
+              >
+                ALL WORDS
+              </button>
+              <button
+                class="uk-button uk-button-default uk-button-small text-secondary primary"
+              >
+                ANY WORDS
+              </button>
+              <button
+                class="uk-button uk-button-default uk-button-small text-secondary primary"
+              >
+                PHRASE
+              </button>
             </div>
           </div>
           <div class="uk-margin">
             <div class="uk-button-group">
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">BIBLE</button>
+              <button
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">OT</button>
+                class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">NT</button>
+              >
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">CHAPTER</button>
+                BIBLE
+              </button>
+              <button
+                class="uk-button uk-button-default uk-button-small text-secondary primary"
+              >
+                OT
+              </button>
+              <button
+                class="uk-button uk-button-default uk-button-small text-secondary primary"
+              >
+                NT
+              </button>
+              <button
+                class="uk-button uk-button-default uk-button-small text-secondary primary"
+              >
+                CHAPTER
+              </button>
             </div>
           </div>
           <div class="uk-button-group" data-uk-button-radio>
             <label class="uk-button primary">
-                                <input class="primary" type="radio" checked="checked" v-model="gender"  value="0" style="display:none;"/>
+              <input
+                class="primary"
+                type="radio"
+                checked="checked"
+                v-model="gender"
+                value="0"
+                style="display: none"
+              />
               Male
             </label>
             <label class="uk-button primary">
-                                <input type="radio"  v-model="gender" value="1" style="display:none;"/>
+              <input
+                type="radio"
+                v-model="gender"
+                value="1"
+                style="display: none"
+              />
               Female
             </label>
           </div>
@@ -46,37 +91,49 @@
           <!-- <input type="color" name="theme" id=""> -->
           <div class="uk-margin">
             <div class="uk-button-group">
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">EXACT MATCH</button>
+              <button
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">PARTIAL MATCH</button>
+                class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
+              >
+                EXACT MATCH
+              </button>
+              <button
+                class="uk-button uk-button-default uk-button-small text-secondary primary"
+              >
+                PARTIAL MATCH
+              </button>
             </div>
           </div>
           <div class="uk-margin">
             <div class="uk-button-group">
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">CASE INSENSITIVE</button>
+              <button
-                                <button class="uk-button uk-button-default uk-button-small text-secondary primary">CASE SENSITIVE</button>
+                class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
+              >
+                CASE INSENSITIVE
+              </button>
+              <button
+                class="uk-button uk-button-default uk-button-small text-secondary primary"
+              >
+                CASE SENSITIVE
+              </button>
             </div>
           </div>
         </div>
       </div>
-
     </div>
   </div>
-
 </template>
 <script>
 export default {
   data() {
     return {
-            search_text: '', 
+      search_text: "",
-            search_area: '',
+      search_area: "",
-            match: '',
+      match: "",
-            sensitivity: '',
+      sensitivity: "",
-            words: '',
+      words: "",
-            gender: '',
+      gender: "",
-        }
+    };
   },
-    methods: {
+  methods: {},
-
+};
-    }
-}
 </script>

src/components/Selection.vue

@@ -1,45 +1,76 @@
 <template>
-    <div id="selection" class="primary text-secondary uk-animation-slide-bottom uk-width-1-1 uk-card uk-card-default uk-card-body rounded" uk-margin>
+  <div
-        <div class="" v-if="!saved_translations.length>0">No translations added. <br/>Please click <a @click="open_settings">HERE</a> to Open Settings</div>
+    id="selection"
+    class="primary text-secondary uk-animation-slide-bottom uk-width-1-1 uk-card uk-card-default uk-card-body rounded"
+    uk-margin
+  >
+    <div class="" v-if="!saved_translations.length > 0">
+      No translations added. <br />Please click
+      <a @click="open_settings">HERE</a> to Open Settings
+    </div>
     <div v-else>
-
+      <ul
-    <ul class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1 " uk-nav="multiple: false" >
+        class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1"
-        <li class="uk-parent uk-witdth-1-1"><a class="text-secondary">Translation</a>
+        uk-nav="multiple: false"
-            <ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
+      >
-
+        <li class="uk-parent uk-witdth-1-1">
+          <a class="text-secondary">Translation</a>
+          <ul
+            class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination"
+            uk-margin
+          >
             <!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
             <li
               class="uk-card uk-card-hover text-secondary rounded"
               v-for="(tr, i) in saved_translations"
               @click="set_translation(tr.abbreviation)"
               :key="i"
-                    ><a class="text-secondary" href="#">{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</a></li>
+            >
+              <a class="text-secondary" href="#"
+                >{{ tr["language"] ? `(${tr["language"]})` : null }}
+                {{ tr["translation"] }}</a
+              >
+            </li>
             <!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
           </ul>
         </li>
         <li class="uk-nav-divider uk-witdth-1-1"></li>
-        <li v-if="translation" class="uk-parent uk-witdth-1-1"><a class="text-secondary">Books</a>
+        <li v-if="translation" class="uk-parent uk-witdth-1-1">
-            <ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
+          <a class="text-secondary">Books</a>
-
+          <ul
+            class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination"
+            uk-margin
+          >
             <!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
-                    <li class="uk-card uk-card-hover text-secondary"
+            <li
+              class="uk-card uk-card-hover text-secondary"
               v-for="(bk, i) in books"
               @click="set_book(bk['nr'])"
               :key="i"
-                    ><a href="#" class="text-secondary">{{bk['name']}}</a></li>
+            >
+              <a href="#" class="text-secondary">{{ bk["name"] }}</a>
+            </li>
             <!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
           </ul>
         </li>
         <li class="uk-nav-divider uk-witdth-1-1"></li>
-        <li v-if="book_nr" class="uk-parent uk-witdth-1-1 "><a class="text-secondary">Chapters</a>
+        <li v-if="book_nr" class="uk-parent uk-witdth-1-1">
-            <ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
+          <a class="text-secondary">Chapters</a>
+          <ul
+            class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination"
+            uk-margin
+          >
             <!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
             <li
               class="uk-card uk-card-hover"
               v-for="(ch, i) in chapters"
               @click="set_chapter(ch['chapter'])"
               :key="i"
-                    ><a href="#selection" class="text-secondary" uk-toggle>{{ch['chapter']}}</a></li>
+            >
+              <a href="#selection" class="text-secondary" uk-toggle>{{
+                ch["chapter"]
+              }}</a>
+            </li>
             <!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
           </ul>
         </li>
@@ -49,9 +80,9 @@
 </template>
 <script>
 // import _ from 'lodash';
-import UIkit from 'uikit';
+import UIkit from "uikit";
 
-import {mapGetters} from 'vuex';
+import { mapGetters } from "vuex";
 export default {
   components: {
     // verses
@@ -59,36 +90,39 @@ export default {
   data: function () {
     return {
       // translation: 'akjv',
-             
+    };
-            }},
+  },
   computed: {
     // translations(){
     //     // console.log(this.$store.state.saved_translations);
     //     return this.$store.getters.saved_translations;
     // },
-                ...mapGetters(['chapters', 'books', 'translation', 'book_nr', 'saved_translations']),
+    ...mapGetters([
-               
+      "chapters",
+      "books",
+      "translation",
+      "book_nr",
+      "saved_translations",
+    ]),
   },
   methods: {
     t(i) {
-                    return this.translations.find(t =>  t.abbreviation === i)
+      return this.translations.find((t) => t.abbreviation === i);
     },
     set_translation(a) {
       console.log("Hello");
-                     this.$store.dispatch('set_translation', {selected_translation:a})
+      this.$store.dispatch("set_translation", { selected_translation: a });
     },
     set_book(b) {
-                    this.$store.dispatch('set_book', b)
+      this.$store.dispatch("set_book", b);
     },
     set_chapter(c) {
-                     this.$store.dispatch('set_chapter', c)
+      this.$store.dispatch("set_chapter", c);
     },
     open_settings() {
-                    UIkit.modal('#modal-sections').show()
+      UIkit.modal("#modal-sections").show();
-                }
     },
-            created(){
+  },
-              
+  created() {},
-            }
+};
-}
 </script>

src/components/Verses.vue

@@ -2,15 +2,20 @@
   <div v-if="verses.length">
     <!-- {{search.toLowerCase() + fverses.length}} -->
     <br />
-        <div class="uk-card uk-card-default primary uk-card-body uk-width-1-1 rounded">
+    <div
-    <ul :dir="dir" 
+      class="uk-card uk-card-default primary uk-card-body uk-width-1-1 rounded"
-     class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
+    >
-        <li  v-for="(verse, i) in pverses" :key="i" 
+      <ul
+        :dir="dir"
+        class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover"
+      >
+        <li
+          v-for="(verse, i) in pverses"
+          :key="i"
           :class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`"
         >
-            
           <h5 class="uk-primary text-secondary">
-              <span class="uk-heading-bullet">  {{book_name+' '}}  </span>
+            <span class="uk-heading-bullet"> {{ book_name + " " }} </span>
             <span class="uk-badge secondary text-primary badge-light">
               {{ verse.chapter }}:{{ verse.verse }}
             </span>
@@ -24,11 +29,18 @@
       </ul>
     </div>
     <div class="uk-position-small uk-position-center-left uk-overlay">
-        <span @click="prevV" class="uk-icon-button primary text-secondary" uk-icon="icon:chevron-left; ratio:2"></span>
+      <span
+        @click="prevV"
+        class="uk-icon-button primary text-secondary"
+        uk-icon="icon:chevron-left; ratio:2"
+      ></span>
     </div>
     <div class="uk-position-small uk-position-center-right uk-overlay">
-        <span @click="nextV" class="uk-icon-button primary text-secondary" uk-icon="icon:chevron-right; ratio:2"></span>
+      <span
-
+        @click="nextV"
+        class="uk-icon-button primary text-secondary"
+        uk-icon="icon:chevron-right; ratio:2"
+      ></span>
     </div>
 
     <!-- <ul class="uk-pagination" uk-margin>
@@ -49,48 +61,60 @@
   </div>
 </template>
 <script>
-import _ from 'lodash';
+import _ from "lodash";
-import {mapGetters} from 'vuex';
+import { mapGetters } from "vuex";
 export default {
   data: () => {
     return {
       // dir: ''
       prev: 0,
-        next:5
+      next: 5,
-        }
+    };
   },
   computed: {
-       ...mapGetters(['verses', 'dir', 'book_name', 'search']),
+    ...mapGetters(["verses", "dir", "book_name", "search"]),
     pverses() {
-           return this.fverses.slice(this.prev, this.next)
+      return this.fverses.slice(this.prev, this.next);
     },
     fverses: function () {
       console.log(this.search);
-                    if(!this.search)
+      if (!this.search) return this.verses;
-                    return this.verses
+      return this.filteredVerses;
-                    return this.filteredVerses
     },
     filteredVerses() {
-                    return _.orderBy(this.verses.filter((item) => 
+      return _.orderBy(
-                            item.verse.toString().toLowerCase().includes(this.search.toLowerCase())
+        this.verses.filter(
-                        || item.chapter.toString().toLowerCase().includes(this.search.toLowerCase())
+          (item) =>
-                        || item.name.toString().toLowerCase().includes(this.search.toLowerCase())
+            item.verse
-                        || item.text.toLowerCase().includes(this.search.toLowerCase())), 'verse');
+              .toString()
+              .toLowerCase()
+              .includes(this.search.toLowerCase()) ||
+            item.chapter
+              .toString()
+              .toLowerCase()
+              .includes(this.search.toLowerCase()) ||
+            item.name
+              .toString()
+              .toLowerCase()
+              .includes(this.search.toLowerCase()) ||
+            item.text.toLowerCase().includes(this.search.toLowerCase())
+        ),
+        "verse"
+      );
     },
   },
   methods: {
     nextV() {
       if (this.next > this.fverses.length) return;
-            this.next = this.next + 5
+      this.next = this.next + 5;
-            this.prev = this.prev+ 5
+      this.prev = this.prev + 5;
       // console.log(this.next, this.prev);
     },
     prevV() {
-            if(this.prev<1)
+      if (this.prev < 1) return;
-            return;
+      this.next -= 5;
-            this.next -=5
+      this.prev -= 5;
-            this.prev -=5
+    },
-        }
+  },
-    }
+};
-}
 </script>