display a foreign data in a table vuejs

Question

I am creating a page, in which a section called product, I show data and in this I have a data called id_categoria, where instead of showing the id I want to show the name of that category in question, this data is in the table of categories and in the product table I have the id. I already managed to show the data, but not this, besides that I managed to save and edit it in question, it is only necessary in show.

When working with vuejs I saw that you have to use a v-if but I do not know how to do it, or at least the attempts I have made have been wrong.

this is the code of the table where I show the data

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

and this is the script to bring the info to me

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

as you can see I have a variable called products, where is the id_category corresponding to the product, and categories where I bring all the category info.

the table looks something like this:

how can I make it not show the id of the category but the name of the category in question ?

pd: the category data is received in json as follows:

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

thank you if you can help me to show the name of the category thank you

RiveN · Accepted Answer · 2021-11-01 08:22:23Z

1

You can implement a function like this:

const findCategory = (id)=>{this.categorias.find(category=>category.id_categoria===id)?.categoria}

And in the template:

<td>{{findCategory(pro.id_categoria)}}</td>

edited Nov 1, 2021 at 8:22

RiveN

2,65911 gold badges17 silver badges29 bronze badges

answered Oct 31, 2021 at 21:50

mianbato

792 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maicol Rojas Over a year ago

hello, how would it be implemented ? if you could explain me a little better I would appreciate it.

Maicol Rojas Over a year ago

thank you very much, I was checking and thanks to you, I managed to make it work, I'm missing a little thing, for the interface, but I appreciate it, I had been trying for a long time to achieve it.

Maik Lowrey · Accepted Answer · 2021-10-31 21:44:55Z

0

Only one small change. In your code you have to edit. pro.id_categoria to pro.categoria. see comment inline.

      <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>
// this line
        <td>{{pro.id_categoria}}</td> 
// edit to
        <td>{{ pro.categoria }} </td>

answered Oct 31, 2021 at 21:44

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

1 Comment

Maicol Rojas Over a year ago

it would not work because pro makes reference to products[], that in list I save the data, but there is only the id of the product category, but not the name of the category.

Collectives™ on Stack Overflow

display a foreign data in a table vuejs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related