1

Estimados ¡Buenas noches!; Para "Listar las categorías en la vista"; explicó que vamos a crear un componente vue (el el directorio del proyecto de laravel) /resources/js/components/Categoria.vue; para lo cual se copia el código que estaba como ejemplo en el componente de la misma carpeta archivo /resources/js/components/Example-components.vue (que posteriormente va hacer eliminado el archivo); en el archivo de "Categoria.vue"; en la parte de abajo del archivo dentro de la etiqueta , se va a crear una función que se llama data() y a la vez va a tener una función que se llama return(), que va tener las variables de los campos nombre, descripción y se declara una variable que se llama ArrayCategoria:[], luego de ello definimos los metodos (que para ello creamos un metodo que se llama listarCategoria()), que incluimos el código de la herramiento axios; que en la ruta definido por el archivo web.php (que esta en la carpeta /routes), tiene este contenido: Archivo (/routes/web.php)

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('contenido/contenido');
});

Route::get('/categoria', 'CategoriaController@index');
Route::post('/categoria/registrar', 'CategoriaController@store');
Route::put('/categoria/actualizar', 'CategoriaController@update');
Route::put('/categoria/desactivar', 'CategoriaController@desactivar');
Route::put('/categoria/activar', 'CategoriaController@activar');

?>

Lo que quiere decir que con la ruta /categoria (para la primera), hace la llamada al Controlador CategoriaController y la función index que esta en la carpeta /App/Http/Controllers/CategoriaController.php); que en la función index tiene lo siguiente:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Categoria;

class CategoriaController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $categorias= Categoria::all();
        return $categorias;
       
    }

    

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $categoria= new Categoria();
        $categoria->nombre= $request->nombre;
        $categoria->descripcion= $request->descripcion;
        $categoria->condicion= '1';
        $categoria->save();
    }


    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request)
    {
        //
        $categoria= Categoria::findOrFail($request->id);
        $categoria->nombre= $request->nombre;
        $categoria->descripcion= $request->descripcion;
        $categoria->condicion= '1';
        $categoria->save();
    }

    public function desactivar(Request $request)
    {
        //
        $categoria= Categoria::findOrFail($request->id);
        $categoria->condicion= '0';
        $categoria->save();
    }

    public function activar(Request $request)
    {
        //
        $categoria= Categoria::findOrFail($request->id);
        $categoria->condicion= '1';
        $categoria->save();
    }

    
}

Ahora bien el contenido del la parte de abajo que esta entre las etiquetas del archivo (/resources/js/components/Categoria.vue); esta el siguiente código:

<script>
   
    export default {
        data(){

            return {

                nombre:'',
                descripcion:'',
                arrayCategoria:[]
            }

        },

        methods:{

           listarCategoria(){

               let me=this;

               axios.get('/categoria').then(function (response) {
                    // handle success
                    //console.log(response);
                    me.arrayCategoria=response.data;
                    
                    
                   
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                });
           }
        
        },
        
        mounted() {
            //console.log('Component mounted.')
            this.listarCategoria();
        }
    }
</script>

y Que luego explico que en la parte de arriba del archivo "Categoria.vue" luego de declarar la etiqueta , juego desde donde se forma la tabla para la información, vamos a usar unas directivas v-if, v-else y v-text; de esta manera:

 <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">

                                          <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>

Que adjunto el código completo del archivo (/resources/js/components/Categoria.vue) de todo lo indicado:

<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" data-toggle="modal" data-target="#abrirmodal">
                            <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">

                                          <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" id="abrirmodal" 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">Agregar categoría</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">×</span>
                            </button>
                        </div>
                       
                        <div class="modal-body">
                            
                            <div class="form-group row div-error">
                                
                                <div class="text-center text-error">
                                    
                                    <div></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" 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" class="form-control" placeholder="Ingrese descripcion">
                                    </div>
                                </div>


                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times fa-2x"></i> Cerrar</button>
                            <button type="button" class="btn btn-success"><i class="fa fa-save fa-2x"></i> Guardar</button>
                           
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!--Fin del modal-->
           
        
        </main>
</template>

<script>
   
    export default {
        data(){

            return {

                nombre:'',
                descripcion:'',
                arrayCategoria:[]
            }

        },

        methods:{

           listarCategoria(){

               let me=this;

               axios.get('/categoria').then(function (response) {
                    // handle success
                    //console.log(response);
                    me.arrayCategoria=response.data;
                    
                    
                   
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                });
           }
        
        },
        
        mounted() {
            //console.log('Component mounted.')
            this.listarCategoria();
        }
    }
</script>

De todo lo explicado realice la compilación del proyecto npm run watch (desde la ventana terminal del Visual Studio Code); y que luego desde la misma ventana de terminal para ejecutar el proyecto php artisan serve (que al correr en el navegador no muestra la información de la tabla); no lo se ¿cuál es el problema?; espero de sus comentarios estimado instructor.

introducir la descripción de la imagen aquí

Estimados, ¡Buenas noches!, de la pantalla capturada que sale con el error, en mi proyecto laravel, en el archivo "web.php" del proyecto que esta en la ruta /routes/web.php esta la ruta adjunto código del archivo "web.php"

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('contenido/contenido');
});

Route::get('/categoria', 'CategoriaController@index');
Route::post('/categoria/registrar', 'CategoriaController@store');
Route::put('/categoria/actualizar', 'CategoriaController@update');
Route::put('/categoria/desactivar', 'CategoriaController@desactivar');
Route::put('/categoria/activar', 'CategoriaController@activar');

?>

De lo que respecta al controlador "CategoriaController.php" que esta en la ruta del proyecto: /app/Http/Controllers/CategoriaController.php ( que en la parte de arriba esta el codigo del controlador CategoriaController.php

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Estimados compile archivo desde la terminal del Visual Studio Code de esta manera npm run watch y luego de varias veces lo volví a compilar con npm run dev Para correr el proyecto de Lavarel puse php artisan serve. Su ayuda.

17
  • 1
    Te esta dando not found el controller...
    – gbianchi
    el 11 jun. 2019 a las 3:18
  • A la derecha en la consola se ve un 404, si hacés click en la URL /categoria, cuál es la URL completa que te carga? Me da la sensación de que está cargando localhost/categoria, lo cual obviamente es incorrecto.
    – azeós
    el 11 jun. 2019 a las 4:09
  • Estimados @azeós , ¡Buenas noches!; les saluda el Lcdo. José Fernando Frugone Jaramillo desde Ecuador (Guayaquil) con respecto a esto lo que indicas la ruta para el controlador es la siguiente: el 12 jun. 2019 a las 1:24
  • @JoseFernandoFrugoneJaramill no se ve la ruta.
    – azeós
    el 12 jun. 2019 a las 1:39
  • Estimado @azeós ¡Buenas noches!, te saluda el Lcdo José Fernando Frugone Jaramillo en la parte de arriba de la pregunta esta el código de la ruta del proyecto Archivo "web.php", el controlador "CategoriaController.php", y el componente vue (Categoria.vue) para que análisis el código porque no muestra la información, el proyecto se compilo de esta manera npm run watch, se hizo las pruebas se corrio con php artisan serve; y se volvió a compilar con el comando npm run watch, tu ayuda. el 12 jun. 2019 a las 1:53

2 respuestas 2

1

Vue es un framework que nada tiene que ver con laravel o PHP. Es importante entender que todo lo que se haga de un lado, como definir rutas y otras cosas, no tiene nada que ver con lo que pasa del otro lado.

Al hacer tu llamada con axios sin especificar una ruta, de la forma

axios.get('/categoria')

Lo que hace el navegador, es apendar esa ruta a la ruta actual de tu pagina web.

Por lo tanto, si tu pagina se esta ejecutando aca:

http://localhost:8080/#/

Entonces axios va a tratar de llamar a

http://localhost:8080/#/categoria

Lo que vos tenes que hacer, es definirle a axios la ruta donde levantaste tu controlador php.
Cuando hiciste: php artisan serve, tu servidor de laravel se levanto en una ruta y un puerto, los cuales no se cuales son. En vue, al usar axios (o cual otro componente para hacer llamadas a controladores), vos le tenes que especificar exactamente cual es la ruta que necesitas.

Por ejemplo, si tu controlador se levanto en el puerto 4560, entonces tu llamada deberia ser

axios.get(' http://localhost:4560/categoria')

Tene en cuenta que dentro de la pantalla de red, en el navegador, dice a que ruta se hizo cada llamada que hizo tu pagina (incluida las llamadas que hace axios).

0

Sobre esta pregunta ya esta solucionado un usuario en esta página WEB me indicó que pusiera de esta manera

axios.get('http://localhost/proyectolaravel/public/categoria');

en el caso de mi proyecto que es proyectolaravel y pude visualizar los registros y quedo solucionado.

1
  • 1
    Fue la respuesta que te dio el otro usuario la correcta?
    – user128299
    el 7 jul. 2019 a las 13:54

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.