vue.js call external js function for search

Question

In vue.js i list the item of users with back-end pagination now i want to add the search functionality i tried to call the method like this

  watch: {
     search: function() {
        Crud.methods.getItems();
       }
    },

but its not working error getting this.pagination is not defined my .vue file

<template>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-2">
                    <router-link :to="{ name: 'districts'}">
                               <span class="glyphicon glyphicon-chevron- 
                            left"></span>
                            </router-link>
                        {{ title }} {{pageTitle}}
                    </div>
                     <div class="col-md-4 search-wrapper">
                       <input type="text" v-model="search" 
                    placeholder="Search users.."/>
                    </div>
                    <div class="col-md-6 text-right">
                        <create-button :name="module+'-create'"></create- 
                    button>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <crud-index :columns="columns" :loading="loading" 
                   :pagination="pagination" @changePage="changePage">
                    <tr v-for="(item,index) in items" :key="item.id">
                        <td>{{ doMath(index) }}</td>
                        <td>
                            <router-link :to="{ name: 'users-edit', params: 
                        { id: item.id, disId:id }}">
                                {{ item.email }}
                            </router-link>
                        </td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.contact }}</td>
                        <td>{{ item.address }}</td>
                        <td>{{ item.age }}</td>
                        <td>{{ (item.gender==1)?'Male':''}} 
                        {{(item.gender==2)?'Female':''}}</td>
                        <td>{{ item.created_at }}</td>
                    </tr>
                </crud-index>
            </div>
        </div>
       </div>
       </div>
     </template>

     <script>
    import Crud from '../../components/Crud/Crud'
    import CrudIndex from '../../components/Crud/Index.vue'
    import CreateButton from "../../components/Crud/CreateButton.vue";

  export default {
    name: 'UsersIndex',
    mixins: [Crud],
    components: {
        CreateButton,
        CrudIndex
    },
    data() {
        return {
            columns: [
                {id: 0, name: 'ID', width: 5},
                {id: 1, name: 'E-mail', width: 20},
                {id: 2, name: 'Name', width: 20},
                {id: 3, name: 'Contact', width: 15},
                {id: 4, name: 'address', width: 20},
                {id: 5, name: 'age', width: 5},
                {id: 6, name: 'gender', width: 10},
                {id: 7, name: 'Created at', width: 20},
            ],
            search: '',
        }
    },
    watch: {
     search: function() {
        console.log(this.search);
        Crud.data();
        Crud.methods.getItems();
       }
    },
    methods:{
        doMath: function (index) {
         return (index+1) + ((this.pagination.currentPage-1)*5)
         }
    }
   }
   </script>

my crud.js file is this now i want to set the "search" variable and call the method getItems()

export default {
props: [],
data() {
    return {
        indexx: 0,
        loading: true,
        items: [],
        pageTitle: '',
        id: this.$route.params.id,
        search: this.$route.params.search,
        pagination: {
            isLoading: true
        }
    };
},
computed: {
    apiUrl() {
        return this.$store.getters.apiUrl;
    },
    module() {
        return this.$store.getters.module;
    },
    title() {
        return this.$store.getters.title;
    }
},
mounted: function() {
    this.getItems().then(() => {
        this.loading = false;
    });
},
methods: {
    getItems(page = 1) {
        return new Promise((resolve) => {
            this.setPaginationLoading();
            this.$http.get(this.getUrl(page)).then((response) => {
                this.items = response.data.data;
                this.setPagination(response.data);
                resolve();
            }, () => {
                this.$swal("Something went wrong. Try again!", '', "error");
            });
        });
    },
    getUrl(page = 1) {
        if (this.module == 'users') {
            if (this.search)
              let query= '&search=' + this.search;
            console.log('In nationality ', nation);
            return this.$store.getters.apiUrl + this.module + '?page=' + 
  page + query;
        }else
            return this.$store.getters.apiUrl + this.module + '/?page=' + 
   page;
    },
    setPaginationLoading() {
        this.pagination.isLoading = true;
    },
    setPagination(data) {
        this.pagination = {
            currentPage: data.meta.current_page,
            from: data.meta.from,
            lastPage: data.meta.last_page,
            to: data.meta.to,
            total: data.meta.total,
            isLoading: false
        }
    },
    changePage(page) {
        this.getItems(page);
    },
  }

};

Answer 1

You're using Crud as a mixin so all the properties are exposed via this on the Vue instance.

So you'd call it using:

watch: {
  search: function() {
    this.getItems();
  }
},

Answer 2

It seems a context issue . Can you try this on your methods

methods: {
    getItems(page = 1) {
      const self = this
        return new Promise((resolve) => {
            self.setPaginationLoading();
            self.$http.get(this.getUrl(page)).then((response) => {
                self.items = response.data.data;
                self.setPagination(response.data);
                resolve();
            }, () => {
                self.$swal("Something went wrong. Try again!", '', "error");
            });
        });
    },
    getUrl(page = 1) {
        if (this.module == 'users') {
            if (this.search)
              let query= '&search=' + this.search;
            console.log('In nationality ', nation);
            return this.$store.getters.apiUrl + this.module + '?page=' + 
  page + query;
        }else
            return this.$store.getters.apiUrl + this.module + '/?page=' + 
   page;
    },
    setPaginationLoading() {
      const self = this
        self.pagination.isLoading = true;
    },
    setPagination(data) {
      const self = this
        self.pagination = {
            currentPage: data.meta.current_page,
            from: data.meta.from,
            lastPage: data.meta.last_page,
            to: data.meta.to,
            total: data.meta.total,
            isLoading: false
        }
    },
    changePage(page) {
        this.getItems(page);
    },
  }
};