0

Realice unas modificaciones en mio componente vue (categoria.vue) que lo tengo en la ruta /resources/js/components/Categoria.vue) para validar que los datos de categoria no estén vacíos pero al compilar el proyecto con npm run watch, y luego al correr el proyecto con php artisan serve no se visualiza el componente categoria.vue; adjunto mi componente Categoria.vue que muestra el código:

<template>
   <main class="main">
            <!-- Breadcrumb -->
            <ol class="breadcrumb">
                <li class="breadcrumb-item active"><a href="/">BACKEND - SISTEMA DE COMPRAS - VENTAS</a></li>
            </ol>
            <div class="container-fluid">
                <!-- Ejemplo de tabla Listado -->
                <div class="card">
                    <div class="card-header">

                       <h2>Listado de Categorías</h2><br/>
                      
                        <button class="btn btn-primary btn-lg" type="button" @click="abrirModal('categoria','registrar')">
                            <i class="fa fa-plus fa-2x"></i>&nbsp;&nbsp;Agregar Categoría
                        </button>
                    </div>
                    <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">
                                      <option value="nombre">Categoría</option>
                                      <option value="descripcion">Descripción</option>
                                    </select>
                                    <input type="text" class="form-control" placeholder="Buscar texto">
                                    <button type="submit"  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>Categoría</th>
                                    <th>Descripción</th>
                                    <th>Estado</th>
                                    <th>Editar</th>
                                    <th>Cambiar Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                                <tr v-for="categoria in arrayCategoria" :key="categoria.id">
                                    
                                    <td v-text="categoria.nombre"></td>
                                    <td v-text="categoria.descripcion"></td>

                                    <td>
                                        <button type="button" class="btn btn-success btn-md" v-if="categoria.condicion">
                                    
                                          <i class="fa fa-check fa-2x"></i> Activo
                                        </button>

                                        <button type="button" class="btn btn-danger btn-md" v-else>
                                    
                                          <i class="fa fa-check fa-2x"></i> Desactivado
                                        </button>
                                       
                                    </td>

                                    <td>
                                        <button type="button" class="btn btn-info btn-md" @click="abrirModal('categoria','actualizar',categoria)">

                                          <i class="fa fa-edit fa-2x"></i> Editar
                                        </button> &nbsp;
                                    </td>

                                    <td>

                                        
                                        <button type="button" class="btn btn-danger btn-sm">
                                            <i class="fa fa-lock fa-2x"></i> Desactivar
                                        </button>
                                       
                                    </td>
                                </tr>
                               
                            </tbody>
                        </table>
                        <nav>
                            <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link" href="#">Anterior</a>
                                </li>
                                <li class="page-item active">
                                    <a class="page-link" href="#">1</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">2</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">3</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">4</a>
                                </li>
                               
                                <li class="page-item">
                                    <a class="page-link" href="#">Siguiente</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!-- Fin ejemplo de tabla Listado -->
            </div>
            <!--Inicio del modal agregar/actualizar-->
            <div class="modal fade" :class="{'mostrar':modal}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
                <div class="modal-dialog modal-primary modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" v-text="tituloModal"></h4>
                            <button type="button" @click="cerrarModal()" class="close" aria-label="Close">
                              <span aria-hidden="true">×</span>
                            </button>
                        </div>
                       
                        <div class="modal-body">
                            
                            <div v-show="errorCategoria()" class="form-group row div-error">
                                
                                <div class="text-center text-error">
                                    
                                    <div v-for="error in errorMostrarMsjCategoria" :key="error" v-text="error"></div>

                                </div>
                            
                            </div>
                             

                            <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
                                <div class="form-group row">
                                    <label class="col-md-3 form-control-label" for="text-input">Categoría</label>
                                    <div class="col-md-9">
                                        <input type="text" v-model="nombre" class="form-control" placeholder="Nombre de categoría">
                                       
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-3 form-control-label" for="email-input">Descripción</label>
                                    <div class="col-md-9">
                                        <input type="email" v-model="descripcion" class="form-control" placeholder="Ingrese descripcion">
                                    </div>
                                </div>


                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" @click="cerrarModal()" class="btn btn-danger"><i class="fa fa-times fa-2x"></i> Cerrar</button>
                            <button type="button" @click="registrarCategoria()" v-if="tipoAccion==1" class="btn btn-success"><i class="fa fa-save fa-2x"></i> Guardar</button>
                            <button type="button" v-if="tipoAccion==2" class="btn btn-success"><i class="fa fa-save fa-2x"></i> Actualizar</button>
                           
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!--Fin del modal-->
           
        
        </main>
</template>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
   
    export default {
        data(){

            return {

                nombre:'',
                descripcion:'',
                arrayCategoria:[],
                modal:0,
                tituloModal:'',
                tipoAccion:0,
                errorCategoria:0,
                errorMostarMsjCategoria:[]
            }

        },

        methods:{

           listarCategoria(){

               let me=this;

               const axios = require('axios');

               axios.get('http://localhost/proyectolaravel/public/categoria').then(function (response) {
                    // handle success
                    //console.log(response);
                    me.arrayCategoria=response.data;
                   
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                });
           },

           registrarCategoria(){

               if(this.validarCategoria()){

                   return;
               }

               let me=this;

               const axios = require('axios');

               axios.post('http://localhost/proyectolaravel/public/categoria/registrar',{

                   nombre:this.nombre,
                   descripcion:this.descripcion

                   //'nombre':this.nombre,
                   //'descripcion':this.descripcion 
               }).then(function (response){
                   //handle success
                   //console.log(response);
                   me.cerrarModal();
                   me.listarCategoria();


               })
               .catch(function (error){
                   // handle error
                   console.log(error);

               }) 
           },

           validarCategoria(){
                  
              this.errorCategoria=0;
              this.errorMostarMsjCategoria=[];
              
              if(!this.nombre) this.errorMostarMsjCategoria.push("(*) el nombre de la categoria no puede estar vacio");

              if(this.errorMostarMsjCategoria.length) this.errorCategoria=1;

              return this.errorCategoria;



           },

           cerrarModal(){

               this.modal=0;
               this.tituloModal="";
               this.nombre="";
               this.descripcion="";

           },

           abrirModal(modelo,accion,data=[]){
                 
                 switch(modelo){

                    case "categoria":
                    
                    {

                        switch(accion){

                            case "registrar":

                                {
                                   
                                   this.modal=1;
                                   this.tituloModal="Registrar Categoria";
                                   this.nombre="";
                                   this.descripcion="";
                                   this.tipoAccion=1;
                                
                                }

                                case "actualizar":

                                {

                                
                                }
                        
                        }


                    }

                }

                        
           }
        
        },
        
        mounted() {
            //console.log('Component mounted.')
            this.listarCategoria();
        }
    }
</script>

<style>
        
     .modal-content{

      width:100% !important;
      position:absolute !important;
  }

  .mostrar{

      display:list-item !important;
      opacity:1 !important;
      position:absolute !important;
      background-color:#3c29297a !important;
  }

  .text-error{

      color:red !important;
      font-weight:bold;
      font-size:20px;

  }

</style>

Esta es la pantalla que había antes de mi proyecto cuando se ejecuta mi proyecto y llama al componente vue (categoria.vue)

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

Mi pregunta es la siguiente ¿hay que hacer algo para confirmar en el archivo app.js de la carpeta /resource de mi proyecto de laravel para que se visualice los cambios que he realizado en mi componente vue categoria.vue?; que adjunto pantalla como sale ahora:

introducir la descripción de la imagen aquí

Adjunto el archivo que llama a mi componente vue (categoria ve) el archivo que se llama "contenido.blade.php" que esta en la ruta /views/contenido/contenido.blade.php" en este caso de mi proyecto

@extends('principal')
@section('contenido')
 
 <template v-if="menu==0">
 <h1>contenido 0</h1>
 </template>

 <template v-if="menu==1">
   <categoria></categoria>
 </template>

 <template v-if="menu==2">
   <h1>contenido 2</h1>
 </template>

 <template v-if="menu==3">
   <h1>contenido 3</h1>
 </template>

 <template v-if="menu==4">
   <h1>contenido 4</h1>
 </template>

  <template v-if="menu==5">
   <h1>contenido 5</h1>
 </template>

 <template v-if="menu==6">
   <h1>contenido 6</h1>
 </template>

 <template v-if="menu==7">
   <h1>contenido 7</h1>
 </template>

 <template v-if="menu==8">
   <h1>contenido 8</h1>
 </template>





@endsection

Estimado @Geimy Puse adjunto print de pantalla de que esta referenciado en el directorio de mi visual studioen el directorio que indicas c:\xampp\htdocs\proyectolaravel

introducir la descripción de la imagen aquí

y Así es como me sale ahora que no me carga mi componente vue (Categoría.vue) que esta en la ruta /resources/js/components/Categoria.vue

introducir la descripción de la imagen aquí

El código de mi archivo /resources/app.js es el siguiente:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))


Vue.component('categoria', require('./components/Categoria.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',

    data:{
        
        menu:0
    },
});

1 respuesta 1

1

Hola @Jose por lo que veo, no creo que esté mal el componente parece que es un problema de referenciarlo en el app.js, revisa si está bien escrito. Debería estar así:

Vue.component('categoria', require('./components/Categoria.vue').default);

Si en el caso contrario si está bien referenciado, revisa si estás compilando en la carpeta correcta.

Por ejemplo si estás en la carpeta

../xampp/htdocs/Dashboard

Revisa si estás también en el cmd en esa carpeta y recién ahí escribes

npm run watch 

Espero haberte ayudado. Fuente: Experiencia propia

2
  • Estimado @Geimy Puse si esta bien referenciado el componente en mi proyecto laravel en el archivo app.js de lo que te adjunto el código y print de pantalla de Visual Studios que es el seguiente Vue.component('categoria', require('./components/Categoria.vue').default); Commented el 30 jun. 2019 a las 12:06
  • Aya entonces revisa si estás en la carpeta correcta, te comento esto porque a mi me pasó lo mismo. Cuando agregas cambios no debes agregar algo más en app.js. Espero hayas solucionado. Saludos
    – Geimy Puse
    Commented el 30 jun. 2019 a las 15:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.