在 table vuejs 中显示一个外部数据

Question

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

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

这是我显示数据table的代码

<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 对应于产品，以及我带来所有类别信息的类别。

table 看起来像这样：

如何让它不显示类别的 ID 而显示相关类别的名称？

pd：在json中收到分类数据如下：

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

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

Answer 1

只有一处小改动。在您的代码中，您必须进行编辑。 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>

Answer 2

你可以实现这样的功能：

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

并且在模板中：

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

在 table vuejs 中显示一个外部数据

display a foreign data in a table vuejs

django-rest-framework

vue.js

axios