在表中显示一个外国数据vuejs

Question

我正在创建一个页面，其中有一个名为 product 的部分，我显示数据，在此我有一个名为 id_categoria 的数据，我不想显示 id，而是显示相关类别的名称，这个数据是在类别表和产品表中，我有 id。我已经设法显示数据，但不是这个，除了我设法保存和编辑有问题的数据之外，它只是在显示时需要的。

在使用 vuejs 时，我看到您必须使用 v-if 但我不知道该怎么做，或者至少我所做的尝试错了。

这是我显示数据的表格的代码

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

这是将信息带给我的脚本

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

如您所见，我有一个名为 products 的变量，其中 id_category 对应于产品，以及我将所有类别信息带入的类别。

表格看起来像这样：

我怎样才能让它不显示类别的ID，而是显示相关类别的名称？

pd：json中接收到的类别数据如下：

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

如果你能帮我显示类别的名称，谢谢

Answer 1

你可以像这样实现一个函数：

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

在模板中：

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

Answer 2

只有一个小改动。在您的代码中，您必须进行编辑。 pro.id_categoria 到 pro.categoria。见内联评论。

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