Skip to main content
se añadieron 1989 caracteres en el cuerpo
Origen Enlace

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

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

Origen Enlace

¿Por qué no visualizó componente vue, ni las modificaciones en vue?

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