0

Estoy creando una página, en la cual hay una sección llamada producto. Muestro datos y en ésta tengo un dato llamado id_categoria, donde en vez de mostrar el id quiero mostrar el nombre de esa categoría. Este dato se encuentra en la tabla categorias y en la tabla producto tengo el id. Ya logré que mostrara los datos pero no éste, además de que logre guardar y editarlo, solo es necesario en mostrar.

Al trabajar con vuejs vi que hay que utilizar un v-if pero no sé como hacerlo, o al menos los intentos que he hecho han sido erróneos.

Este es el código de la tabla donde muestro los datos

<div class="card-body table-responsive ">
    <table id="example1" class="table table-bordered table-striped ">
        <thead>
            <tr>
                <th>id_producto</th>
                <th>imagen</th>
                <th>código</th>
                <th>producto</th>
                <th>categoria</th>
                <th>stock</th>
                <th>precio_compra</th>
                <th>precio_venta</th>
                <th>fecha</th>
                <th colspan="2" class="text-center">Acciones</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for= "pro in productos" :key="pro.id_productos">
                <th>{{pro.id_productos}}</th>
                <td>   
                <img :src='pro.imagen' class="img-circle elevation-2" alt="Product Image" width="60">
                </td>
                <td>{{pro.codigo}}</td>
                <td>{{pro.producto}}</td>
                <td>{{pro.id_categoria}}</td>
                <td>{{pro.stock}}</td>
                <td>{{pro.precio_compra}}</td>
                <td>{{pro.precio_venta}}</td>
                <td>{{pro.fecha}}</td>
                <td class="text-center">
                    <button @click="modificar=true; abrirModal(pro)" type="button" class="editar btn btn-primary"><i class = "fa fa-pencil-alt"></i></button>
                </td>
                <td class="text-center">
                    <button @click="eliminar(pro.id_productos,pro.producto)" type="button" class="eliminar btn btn-danger" data-toggle="modal" data-target="#modalEliminar"><i class="fas fa-dumpster-fire"></i></button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>id_producto</th>
                <th>imagen</th>
                <th>código</th>
                <th>producto</th>
                <th>categoria</th>
                <th>stock</th>
                <th>precio_compra</th>
                <th>precio_venta</th>
                <th>fecha</th>
                <th colspan="2" class="text-center">Acciones</th>
            </tr>
        </tfoot>
    </table>
</div>

Y este el script para que me traiga la info

<script>
    
    import axios from "axios";
    
    export default {
        watch: {
            $route: {
                immediate: true,
                handler(to, from) {
                    document.title = to.meta.title || 'Productos';
                }
            },
        },
        data() {
            return {
                productosdatos:{
                    id_producto: "",
                    codigo: "",
                    producto: "",
                    stock: "",
                    precio_compra: "",
                    precio_venta : "",
                    id_categoria: "",
                   
                },
             
                id: 0,
                modificar: true,
                modal: 0,
                tituloModal: '',
                productos:[],
                categorias:[],
            }
        },
        methods: {
            async listarcategorias(){
                const res = await axios.get('http://localhost:8000/categoria/');
                this.categorias = res.data;
                console.log(this.categorias)
    
            },
            async listar(){
                const res = await axios.get('http://localhost:8000/productos/');
                this.productos = res.data;
                console.log(this.productos)
    
            },
            cerrarModal(){
                this.modal = 0;
            }
        },
        created() {
            this.listar();
        }
       
    }
</script>

Como pueden ver tengo una variable llamada productos, donde está el id_categoria correspondiente del producto, y categrias donde traigo toda la info de categoria.

La tabla se ve algo asi:

introducir la descripción de la imagen aquí

¿Cómo hago para que no muestre el id de la categoría si no el nombre de la categoría?

PD: los datos de categorias se reciben en json de la siguiete manera:

{
    "id_categoria": 8,
    "categoria": "Electrodomesticos",
    "fecha": "2021-10-24 13:55:00"
},

Les agradezco si me pueden ayudar a que aparezca el nombre de la categoría, gracias .

3
  • 1
    Te puedes hacer un método que reciba el id de la categoría y busque en el array categorias a cuál corresponde y devuelva el nombre. Eso se puede lograr con el método find de javascript Commented el 28 oct. 2021 a las 14:08
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! porque tu metodo en el backend no trae directamente la descripcion de la categoria, ademas del id? si no, vas a tener que escribir un metodo que busque el nombre en el front, por cada fila!
    – gbianchi
    Commented el 28 oct. 2021 a las 14:21
  • Lo más fácil sería que desde tu consulta regreses un campo que contenga el nombre de la categoría y ese pasarlo en el objeto que construyes en la tabla. Commented el 4 nov. 2021 a las 19:14

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.