¿Porque no se muestra el listado de compras en mi componente vue compras.vue, y los proveedores en v-select de proveedores?


Estimados en mi proyecto laravel que se llama Proyectolaravel tengo un componente en la carpeta /resources/js/components/compra.vue no muestra el listado de compras inoveedores en el incialmente, ni la lista de proveedores en el formulario de igreso de compras (que usado la herramienta vue select para el listado de proveedores vue select

Pantalla de Compras (listado de compras que no muestra) Componente compras.vue no muestra listado Componente compras.vue formulario

Componente compra.vue

(Presento solo del componente compra.vue la parte del listado y formulario) y metodos para obtener los proveedores

Para Listado

                   <h2>Listado de Compras</h2><br/>                      <button class="btn btn-primary btn-lg" type="button" @click="mostrarDetalle()">                         <i class="fa fa-plus fa-2x"></i>&nbsp;&nbsp;Nueva Compra                     </button>                 </div>                 <!--- Listado-->                  <div class="card-body">                     <div class="form-group row">                         <div class="col-md-6">                             <div class="input-group">                                 <select class="form-control col-md-3" v-model="criterio">                                   <option value="tipo_identificacion">Tipo identificación</option>                                   <option value="num_compra">Número Compra</option>                                   <option value="fecha_compra">Fecha Compra</option>                                 </select>                                 <input type="text"  @keyup.enter="listarCompra(1,buscar,criterio);" v-model="buscar" class="form-control" placeholder="Buscar texto">                                 <button type="submit"  @click="listarCompra(1,buscar,criterio);" class="btn btn-primary"><i class="fa fa-search"></i> Buscar</button>                             </div>                         </div>                     </div>                     <table class="table table-bordered table-striped table-sm">                         <thead>                             <tr class="bg-primary">                                      <th>Ver Detalle</th>                                     <th>Fecha Compra</th>                                     <th>Número Compra</th>                                     <th>Proveedor</th>                                     <th>Tipo de identificación</th>                                     <th>Comprador</th>                                       <th>Total (USD$  )</th>                                     <th>Impuesto</th>                                     <th>Estado</th>                                     <th>Cambiar estado</th>                                     <th>Descargar Reporte</th>                             </tr>                         </thead>                         <tbody>                              <tr v-for="compra in arrayCompra" :key="compra.id">                                      <td>                                          <!--compra.id-->                                         <button type="button" @click="verCompra(compra.id)" class="btn btn-warning btn-sm">                                         <i class="fa fa-eye fa-2x"></i> Ver detalle                                         </button> &nbsp;                                       </td>                                     <td v-text="compra.fecha_compra"></td>                                     <td v-text="compra.num_compra"></td>                                     <td v-text="compra.nombre"></td>                                     <td v-text="compra.tipo_identificacion"></td>                                      <td v-text="compra.usuario"></td>                                      <td v-text="compra.total"></td>                                     <td v-text="compra.impuesto"></td>                                     <td>                                           <button type="button" v-if="compra.estado=='Registrado'" class="btn btn-success btn-sm">                                             <i class="fa fa-check fa-2x"></i> Registrado                                         </button>                                          <button type="button" v-else class="btn btn-danger btn-sm">                                              <i class="fa fa-times fa-2x"></i> Anulado                                         </button>                                      </td>                                       <td>                                         <template v-if="compra.estado=='Registrado'">                                             <button type="button" class="btn btn-danger btn-sm" @click="desactivarCompra(compra.id)">                                                 <i class="fa fa-times fa-2x"></i> Anular Compra                                             </button>                                         </template>                                          <template v-else>                                             <button type="button" class="btn btn-danger btn-sm">                                                  <i class="fa fa-check fa-2x"></i> Cambiado                                             </button>                                         </template>                                     </td>                                      <td>                                           <button type="button" @click="pdfCompra(compra.id)" class="btn btn-info btn-sm">                                         <i class="fa fa-file fa-2x"></i> Descargar PDF                                         </button> &nbsp;                                     </td>                               </tr>                          </tbody>                     </table>                     <nav>                         <ul class="pagination">                             <li class="page-item" v-f="pagination.current_page > 1">                                 <a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.current_page - 1,buscar,criterio)">Anterior</a>                             </li>                              <li class="page-item" v-for="page in pagesNumber" :key="page" :class="[page == isActived ? 'active' : '']">                                 <a class="page-link" href="#" @click.prevent="cambiarPagina(page,buscar,criterio)" v-text="page"></a>                             </li>                               <li class="page-item" v-if="pagination.current_page < pagination.last_page">                                 <a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.current_page + 1,buscar,criterio)">Siguiente</a>                             </li>                         </ul>                     </nav>                 </div>                 </template> 

Para el formulario de ingreso de compras:

                <template v-else>                 <span><strong>(*) Campo obligatorio</strong></span><br/>                  <h3 class="text-center">Llena el formulario</h3>                  <div class="card-body">                       <div class="form-group row border">                         <div class="col-md-8">                             <div class="form-group">                               <label class="text-uppercase"><strong>Numero Compra(*)</strong></label>                               <input type="text" class="form-control" v-model="num_compra" placeholder="">                           </div>                         </div>                          <div class="col-md-8">                              <div class="form-group">                                 <label class="text-uppercase"><strong>Proveedor(*)</strong></label>                                 <v-select                                   :on-search="selectProveedor"                                   label="nombre"                                   :options="arrayProveedor"                                   placeholder="Buscar Proveedores..."                                   :onChange="getDatosProveedor"                                  >                                 </v-select>                             </div>                         </div>                          <div class="col-md-8">                              <div class="form-group">                                 <label class="text-uppercase"><strong>Tipo Identificacion(*)</strong></label>                                 <select class="form-control" v-model="tipo_identificacion">                                     <option value="0">Seleccione</option>                                     <option value="FACTURA">Factura</option>                                     <option value="NV">Nota_vta</option>                                     <option value="PROFORMA">Proforma</option>                                     <option value="TICKET">Ticket</option>                                 </select>                             </div>                         </div>                          <div class="col-md-8">                             <label class="text-uppercase"><strong>Impuesto(*)</strong></label>                             <input type="text" class="form-control" v-model="impuesto">                         </div>                          <div class="form-group row">                              <div class="col-md-12">                                 <div v-show="errorCompra" class="form-group row div-error">                                     <div v-for="error in errorMostrarMsjCompra" :key="error" v-text="error">                                      </div>                                 </div>                                </div>                         </div>                          <br/><br/>                          <div class="form-group row border">                             <div class="col-md-6">                                 <div class="form-group">                                     <label>Producto <span class="text-error" v-show="idproducto==0">(*Ingrese codigo)</span></label>                                     <div class="form-inline">                                         <input type="text" class="form-control" v-model="codigo" @keyup.enter="buscarProducto()" placeholder="Ingrese codigo">                                         <button @click="abrirModal()" class="btn btn-primary">                                              <i class="fa fa-plus"></i>&nbsp;Agregar Producto                                         </button>                                         <input type="text" readonly class="form-control" v-model="producto">                                                </div>                                 </div>                             </div>                             <div class="col-md-2">                                 <div class="form-group">                                     <label>Precio <span class="text-error" v-show="precio==0">(*precio)</span></label>                                     <input type="number" value="0" step="any" class="form-comtrol" v-model="precio">                                 </div>                               </div>                             <div class="col-md-2">                                 <div class="form-group">                                     <label>Cantidad <span class="text-error" v-show="cantidad==0">(*valor)</span></label>                                     <input type="number" value="0" step="any" class="form-control" v-model="precio">                                 </div>                             </div>                             <div class="col-md-2">                                 <div class="form-group">                                     <button @click="agregarDetalle()" class="btn btn-primary form-control btnagregar"><i class="fa fa-plus fa-2x"></i> Agregar detalle</button>                                 </div>                                 </div>                         </div>                           <br/><br/>                          <div class="form-group row border">                              <h3>Lista Compra a Proveedores</h3>                              <div class="table-responsive col-md-12">                                 <table class="table table-bordered table-striped table table-sm">                                     <thead>                                         <tr class="bg-success">                                             <th>Eliminar</th>                                             <th>Producto</th>                                             <th>Precio (USD$  )</th>                                             <th>Cantidad</th>                                             <th>Total (USD$  )</th>                                         </tr>                                     </thead>                                     <tbody v-if="arrayDetalle.length">                                         <tr v-for="(detalle,index) in arrayDetalle" :key="detalle.id">                                             <td>                                                 <button @click="eliminarDetalle(index)" type="button" class="btn btn-danger btn-sm">                                                     <i class="fa fa-times fa-2x"></i>                                                 </button>                                             </td>                                             <td v-text="detalle.producto">                                             </td>                                             <td>                                                 <input v-model="detalle.precio" type="number" value="3" class="form-control">                                             </td>                                             <td>                                                 <input v-model="detalle.cantidad" type="number" value="2" class="form-control">                                             </td>                                             <td>                                                 {{detalle.precio*detalle.cantidad}}                                             </td>                                          </tr>                                         <tr style="background-color: grey;">                                             <td colspan="4" align="rigth"><strong>Sub-Total:</strong></td>                                             <td><strong> USD$   {{subTotal=((subTotal+(detalle.precio*detalle.cantidad))).toFixed(2)}}</strong></td>                                           </tr>                                         <tr style="background-color: grey;">                                             <td colspan="4" align="rigth"><strong>Impuesto:</strong></td>                                             <td><strong> USD$   {{subTotalImpuesto=(subTotal*impuesto).toFixed(2)}}</strong></td>                                           </tr>                                         <tr style="background-color: grey;">                                             <td colspan="4" align="rigth"><strong>Total:</strong></td>                                             <td><strong> USD$   {{total=calcularTotal}}</strong></td>                                           </tr>                                     </tbody>                                     <tbody v-else>                                         <tr>                                             <td colspan="5">                                                 No se ha agregado productos                                             </td>                                         </tr>                                     </tbody>                                 </table>                             </div>                         </div>                         <div class="form-group row">                             <div class="col-md-12">                                 <button type="button" class="btn btn-danger" @click="ocultarDetalle()"><i class="fa fa-times fa-2x"> Cerrar</i></button>                                 <button type="button" class="btn btn-success" @click="registrarCompra()"><i class="fa fa-save fa-2x"> Registrar Compra</i></button>                             </div>                         </div>                        </div>                       <!-- Fin Detalles -->                 </div>                 </template> 

Método del script para obtener listado que se llama listarCompras()

methods:{             listarCompra(page,buscar,criterio){                 let me=this;                 var url= 'http://localhost/proyectolaravel/public/compra?page=' + page + '&buscar='+ buscar + '&criterio='+criterio;                 axios.get(url).then(function (response) {                     // handle success                     //console.log(response);                     var respuesta = response.data;                     me.arrayCompra=respuesta.compras.data;                     me.pagination= respuesta.pagination;                 })                 .catch(function (error) {                     // handle error                     console.log(error);                 });            },          

Ahora métodos para Proveedores selectProveedor() y getDatosProveedor()

selectProveedor(search,loading){                let me=this;                loading(true)                 var url = 'http://localhost/proyectolaravel/public/proveedor/selectProveedor?filtro='+search;                axios.get(url).then(function (response) {                    let respuesta = response.data;                    q: search                    me.arrayProveedor=respuesta.proveedores;                    loading(false);                 })                .catch(function (erro){                    console.log(error);                });               },              getDatosProveedor(val1){                let me= this;                me.loading = true;                me.idproveedor = val1.id;                       },            

Su ayuda con esto que no muestra listado de compras y listado de proveedores

Pantalla de compra.vue que no muestra listado

Componente compra.vue no muestra listado

Componente compra.vue formulario de ingreso

Error que sale en el componente compra.vue Componente compra.vue error que sale