Pedido.vue
<template>
<div id="pedido" style="margin-top:50px">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Pedidos</h4>
<div class="card-tools" style="position: absolute;right: 1rem;top: .5rem;">
<button type="button" class="btn btn-info" >
Nuevo
<i class="fas fa-plus"></i>
</button>
<button type="button" class="btn btn-primary" >
Recargar
<i class="fas fa-sync"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<div class="row">
<div class="col-md-2">
<strong>Buscar por :</strong>
</div>
<div class="col-md-3">
<select class="form-control" id="fileds">
<option value="total">Codigo</option>
<option value="name">Nombre</option>
<option value="email">Apellido</option>
<option value="phone">Telefono</option>
<option value="address">Direccion</option>
</select>
</div>
<div class="col-md-7">
<input type="text" class="form-control" placeholder="Buscar">
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th scope="col">Codigo</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">Telefono</th>
<th scope="col">Rut</th>
<th scope="col" class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(pedido, index) in pedidos" :key="pedido.codigo">
<th scope="row">{{ index + 1}}</th>
<td>{{ pedido.nombre_cliente}}</td>
<td>{{ pedido.apellido_cliente }}</td>
<td>{{ pedido.telefono_cliente}}</td>
<td>{{ pedido.rut_cliente }}</td>
<td class="text-center">
<button type="button" class="btn btn-info btn-sm">
<i class="fas fa-eye"></i>
</button>
<button type="button" class="btn btn-primary btn-sm">
<i class="fas fa-edit"></i>
</button>
<button
type="button"
class="btn btn-danger btn-sm"
>
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
<tr >
<td colspan="6">
<div class="alert alert-danger" role="alert">No se ah encontrado resultados :(</div>
</td>
</tr>
</tbody>
</table>
<div class="card-footer">
<pagination
v-if="pagination.last_page > 1"
:pagination="pagination"
:offset="5"
@paginate="getData()"
></pagination>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
pedidos:[],
pagination: {
current_page: 1,
},
}
},
mounted() {
console.log('Component mounted.')
this.getData();
},
methods:{
getData(){
this.$Progress.start();
axios.get("api/pedidos?page=" + this.pagination.current_page)
.then(response =>{
this.pedidos = response.data.data;
this.pagination = response.data.meta;
this.$Progress.finish();
})
.catch(e =>{
console.log(e)
this.$Progress.fail();
})
//.then(({ data }) => (this.pedidos = data));
}
},
}
</script>
这是其PaginationComponent.vue：
<template>
<nav aria-label="...">
<ul class="pagination justify-content-center">
<li class="page-item" :class="{ disabled: pagination.current_page <= 1 }">
<a class="page-link" @click.prevent="changePage(1)" >First page</a>
</li>
<li class="page-item" :class="{ disabled: pagination.current_page <= 1 }">
<a class="page-link" @click.prevent="changePage(pagination.current_page - 1)">Previous</a>
</li>
<li class="page-item" v-for="page in pages" :key="page" :class="isCurrentPage(page) ? 'active' : ''">
<a class="page-link" @click.prevent="changePage(page)">{{ page }}
<span v-if="isCurrentPage(page)" class="sr-only">(current)</span>
</a>
</li>
<li class="page-item" :class="{ disabled: pagination.current_page >= pagination.last_page }">
<a class="page-link" @click.prevent="changePage(pagination.current_page + 1)">Next</a>
</li>
<li class="page-item" :class="{ disabled: pagination.current_page >= pagination.last_page }">
<a class="page-link" @click.prevent="changePage(pagination.last_page)">Last page</a>
</li>
</ul>
</nav>
</template>
<script>
export default {
props:['pagination', 'offset'],
methods: {
isCurrentPage(page){
return this.pagination.current_page === page
},
changePage(page) {
if (page > this.pagination.last_page) {
page = this.pagination.last_page;
}
this.pagination.current_page = page;
this.$emit('paginate');
}
},
computed: {
pages() {
let pages = []
let from = this.pagination.current_page - Math.floor(this.offset / 2)
if (from < 1) {
from = 1
}
let to = from + this.offset -1
if (to > this.pagination.last_page) {
to = this.pagination.last_page
}
while (from <= to) {
pages.push(from)
from++
}
return pages
}
}
}
</script>
app.js
Vue.component('pagination', require('./components/partial/PaginationComponent.vue'));
const app = new Vue({
el: '#app',
router
});
但是在控制台的vue扩展名中，我看到了 对象的属性，这很好， 但是我不知道自己在做什么错，就像我说我是新来的一样。
我希望他们了解我， 非常感谢您的帮助。
答案 0 :(得分：0)
Pedido.vue
export default {
components: { pagination },
data(){ ....
也许是这个问题
答案 1 :(得分：0)
在文件app.js上，除了指定要安装组件的位置（在这种情况下，在ID为“ app”的div上），还需要告诉Vue 进行渲染。
您的app.js文件上的组件应包含模板或渲染函数，这就是为什么您收到错误消息“无法安装组件：模板或渲染函数未定义。
您可以这样添加它：
const app = new Vue({
el: '#app',
router,
template: '<pagination/>'
});
或使用如下渲染功能：
import Pagination from './components/partial/PaginationComponent.vue'
const app = new Vue({
el: '#app',
router,
render: (h) => h(Pagination)
});
答案 2 :(得分：0)
好吧，我尝试了他们的答案，但没有成功， 我设法通过添加以下内容来解决它：
Vue.component（'pagination'，require（'./ components / partial / PaginationComponent.vue'）。default）;