Question

在vue.js中，我现在列出具有后端分页的用户项，我想添加搜索功能，我试图调用这种方法

df = pd.concat([df, df1]).sort_index()
print (df)
             jan-19       Feb-19      
              Bill1 Bill2  Bill1 Bill2
PC Geo Comp                           
A  Ind OS         1  1.28      1  1.28
       OP         8  2.00      1  1.00
       Total      9  3.28      2  2.28
B  US  OV         1  1.28      1  1.28
       Total      1  1.28      1  1.28
C  Can OV         1  1.28      1  1.28
       Total      1  1.28      1  1.28

但是获取this.pagination没有定义错误我的.vue文件

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

我的crud.js文件是我现在要设置“搜索”变量并调用方法getItems（）

<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>

};

Answer 1

您使用Crud作为混合，因此所有属性都通过Vue实例上的this公开。

因此，您可以使用以下方式调用它：

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

Answer 2

似乎是一个上下文问题。你可以在你的方法上尝试一下

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);
    },
  }
};

vue.js调用外部js函数进行搜索

2 个答案: