Question

这是我在laravel项目中为我的Vue应用程序制作的组件。

<template>
        <div>
            <h2 class="text-center mt-3 mb-5">Categories</h2>
            <form v-on:submit.prevent="addCategory">
                <div class="row">
                    <div class="col-2"></div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" v-model="name.name">
                        </div>
                    </div>
                    <div col-2>
                        <button class="ml-5 btn btn-primary" v-on:submit.prevent="addCategory">Add New Tag</button>
                    </div>
                    <div class="col-2"></div>
                </div>
            </form>


            <div class="row">
                <div class="col-2"></div>
                <div class="col-md-8">
                    <br/>
                    <table class="table table-hover">
                        <thead>
                        <tr class="alert-info">
                            <td>ID</td>
                            <td>Category Name</td>
                            <td style="width: 25%">Actions</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="category in categories.data">
                            <td>{{ category.id }}</td>
                            <td>{{ category.name }}</td>
                            <td>
                                <router-link :to="{name: 'EditCategory', params: { id: category.id }}"
                                             class="btn btn-primary btn-sm ml-auto">Edit
                                </router-link>
                                <button class="btn btn-danger btn-sm" v-on:click="deleteCategory(category.id)">Delete
                                </button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                    <vue-pagination :pagination="categories" @paginate="fetchCategories()" :offset="4"></vue-pagination>
                    <hr class="custom-hr-divider"/>
                </div>
                <div class="col-2"></div>
            </div>
        </div>

    </template>

    <script>
        export default {
            data() {
                return {
                    categories:{
                        total: 0,
                        per_page: 2,
                        from: 1,
                        to: 0,
                        current_page: 1
                    },
                    name: {}
                }
            },

            created: function () {
                this.fetchCategories();
            },

            components:{
                VuePagination: require('../components/Pagination.vue')
            },

            methods: {
                fetchCategories() {
                    this.axios.get('/categories/index?page=' + this.current_page)
                        .then(function (response) {
                            this.users = response.data.data;
                            this.pagination = response.data;
                        })
                        .catch(() => {
                            console.log('handle server error from here');
                        });
                },

                deleteCategory(id) {
                    let uri = `http://localhost:8000/categories/delete/${id}`;
                    this.axios.delete(uri);
                    this.fetchCategories();
                },

                addCategory() {
                    let uri = 'http://localhost:8000/categories';
                    this.axios.post(uri, this.name).then((response) => {
                        this.fetchCategories();
                        this.name = {};
                    })

                }
            }
        };
    </script>

这是我在在线教程中找到的Pagination.vue文件。

我的应用程序在没有分页的情况下正常工作，但引入此代码会导致以下错误。

***[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <VuePagination>
       <DisplayCategory> at resources\assets\js\components\DisplayCategory.vue
         <Root>***

我在哪里定义组件？我一直试图让这个工作几个小时。

app.js

import Vue from 'vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';

Vue.use(VueAxios, axios);

import App from './App.vue';
import DisplayTag from './components/DisplayTag.vue';
import EditTag from './components/EditTag.vue';
import DisplayCategory from './components/DisplayCategory.vue';
import EditCategory from './components/EditCategory.vue';

const routes = [
    {
        name: 'DisplayTag',
        path: '/tags',
        component: DisplayTag
    },
    {
        name: 'EditTag',
        path: '/tags/edit/:id',
        component: EditTag
    },
    {
        name: 'DisplayCategory',
        path: '/categories',
        component: DisplayCategory
    },
    {
        name: 'EditCategory',
        path: '/categories/edit/:id',
        component: EditCategory
    }
];


const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

任何有任何想法的人我做错了什么？提前谢谢。

Answer 1

使用laravel-vue-pagination

实现分页

入门很容易理解，我只需更换1行，因为我正在使用axios。

fetchCategories(page) {
    if (typeof page === 'undefined') {
        page = 1;
    }

    // Using vue-resource as an example
    let uri = `http://localhost:8000/categories/index?page=`;
    this.axios.get(uri + page).then((response) =>
    {this.categories = response.data;})

Vue和Laravel中的分页问题

1 个答案: