我尝试在组件 vue 中安装组件

Question

我尝试在一个组件中安装一个组件，这个组件是一个部分，特别是它的一个分页器，我需要集成它，我在分页组件中使用道具。 但我有一个问题，在控制台中出现下一条消息“无法安装组件：未定义模板或渲染功能。”我是 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

我希望他们能理解我， 非常感谢您的帮助。

Answer 1

好吧，我尝试了他们的答案，但没有奏效， 我设法通过添加来解决它：

Vue.component('pagination', require('./components/partial/PaginationComponent.vue').default);

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

Answer 3

Pedido.vue

export default {
  components: { pagination },
  data(){ ....

也许是这个问题