我尝试在组件 vue 中安装组件
Posted
技术标签:
【中文标题】我尝试在组件 vue 中安装组件【英文标题】：i try to mount a component in a component vue 【发布时间】：2019-11-02 15:21:46 【问题描述】：我尝试在一个组件中安装一个组件，这个组件是一个部分，特别是它的一个分页器，我需要集成它，我在分页组件中使用道具。 但我有一个问题，在控制台中出现下一条消息“无法安装组件：未定义模板或渲染功能。”我是 vue js 的新手，我使用路由器视图我不知道这是否 它正在影响下一个代码的问题：
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
);this its the error
但在控制台中的 vue 扩展中，我看到了 对象的属性，这很好， 但我不知道我做错了什么，就像我说我是新手一样。
extension of vue
我希望他们能理解我， 非常感谢您的帮助。
【问题讨论】：
【参考方案1】：好吧，我尝试了他们的答案，但没有奏效， 我设法通过添加来解决它：
Vue.component('pagination', require('./components/partial/PaginationComponent.vue').default);
【讨论】：
【参考方案2】：在 app.js 文件中，除了指定 where 来安装组件（在这种情况下，在 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)
);
【讨论】：
【参考方案3】：Pedido.vue
export default
components: pagination ,
data() ....
也许是这个问题
【讨论】：
以上是关于我尝试在组件 vue 中安装组件的主要内容，如果未能解决你的问题，请参考以下文章