我如何显示特定元素的信息vuejs

Question

hello早上好，我有一个问题，我有2张桌子，一个主桌子上有一个按钮，可以打开第二个桌子的弹出窗口。 有什么想法？如果我单击第一个表和第一个选项的按钮，它只需要向我展示该元素的信息，在弹出窗口中，我会制作一个console.log（item.ID），它很好地向我显示了该元素的数据，但是当我打开弹出窗口时，它会显示所有数据。

<template>
 <v-card>
  <v-card-title>
  Control Modificaciones
  </v-card-title>
  <v-card-text>
  <v-row>
    <v-col cols="12" md="3" class="ml-3">
      <v-text-field
        v-model="fechaDesde"
        type="date"
        label="Fecha Desde"
        :rules="[(v) => !!v || 'Este campo es requiredo']"
        required
      ></v-text-field>
    </v-col>
    <v-col cols="12" md="3" class="ml-3">
      <v-text-field
        v-model="fechaHasta"
        type="date"
        label="Fecha Hasta"
        :rules="[(v) => !!v || 'Este campo es requiredo']"
        required
      ></v-text-field>
    </v-col>
    <v-btn color="info" title="Crear" class="mt-6 ml-8" @click="buscar()">
      Buscar
    </v-btn>
  </v-row>
   </v-card-text>
  <v-row>
  <v-col cols="8" md="8" class="ml-3">
    <v-card-text>
      <v-simple-table>
        <template>
          <thead>
            <tr>
              <th class="text-left">Nro Orden</th>
              <th class="text-left">Cliente</th>
              <th class="text-left">Tipo</th>
              <th class="text-left">Fecha Creacion</th>
              <th class="text-left">Fecha Ult Modificacion</th>
              <th class="text-left">Cant Modificada</th>
              <th class="text-left">Acciones</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.numero }}</td>
              <td>{{ item.cliente.nombre }}</td>
              <td>{{ item.tipoPresupuestoString }}</td>
              <td>{{ formatDate(item.fechaAlta) }}</td>
              <td>{{ formatDate(item.fechaModificacion) }}</td>
              <td>{{ item.numero }}</td>
              <td>
                <v-icon
                  title="Historial del presupuesto"
                  @click="abrirPopupListadoPresupuestoHistorial(item)"
                  >mdi-clipboard-text-clock-outline</v-icon
                >
              </td>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
    </v-card-text>
  </v-col>
</v-row>

<v-row>
  <v-col cols="12" md="12" class="ml-3">
    <v-dialog
      v-model="popupPresupuestoHistorial"
      class="ml-10"
      max-width="800px"
      max-height="700px"
    >
      <v-card>
        <v-card-title class="text-h3 dark lighten-2">
          Listado de Presupuesto Historial.
        </v-card-title>
        <v-card-text>
          <v-simple-table>
            <template>
              <thead>
                <tr>
                  <th class="text-left">Fecha</th>
                  <th class="text-left">Comentario</th>
                  <th class="text-left">Usuario</th>
                  <th class="text-left">Datos Generales</th>
                  <th class="text-left">Articulos Nuevos</th>
                  <th class="text-left">Articulos Modifados</th>
                  <th class="text-left">Articulos Eliminados</th>
                  <th class="text-left">Acciones</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in list" :key="item.id">
                  <td>{{ formatDate(item.fecha) }}</td>
                  <td>{{ item.observacion }}</td>
                  <td>{{ item.usuario.name }}</td>
                  <td>{{ item.datosCabecera }}</td>
                  <td>{{ item.articulosNuevos }}</td>
                  <td>
                    {{ item.articulosModificados }}
                  </td>
                  <td>
                    {{ item.articulosEliminados }}
                  </td>
                  <td></td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            text
            color="primary"
            @click="popupPresupuestoHistorial = false"
          >
            Cancelar
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-col>
</v-row>
</v-card>
</template>

<script>
import moment from "moment";
import PresupuestoServices from "../../services/PresupuestoServices";
import Swal from "sweetalert2";

export default {
name: "ControlModificaciones",
data() {
return {
  fechaHasta: null,
  fechaDesde: null,
  list: [],
  popupPresupuestoHistorial: false,
 };
 },
 created() {
 this.presupuestoServices = new PresupuestoServices();
 },
 mounted() {},
 methods: {
 showSuccess(message) {
  this.$toastr.Add({
    name: "UniqueToastName",
    title: "Success Message",
    msg: message,
    type: "success",
  });
},
showError(message) {
  this.$toastr.Add({
    name: "UniqueToastName",
    title: "Error Message",
    msg: message,
    type: "error",
  });
},
formatDate(value) {
  return value ? moment(value).format("DD/MM/YYYY") : "";
},
buscar() {
  if (this.fechaDesde == null && this.fechaHasta == null) {
    Swal.fire("Primero debes seleccionar las fechas.");
    return;
  }
  const fechaDesde = this.fechaDesde != null ? this.fechaDesde : null;
  const fechaHasta = this.fechaHasta != null ? this.fechaHasta : null;

  Swal.fire({
    title: "Espere unos momentos ...",
    showConfirmButton: false,
  });
  this.presupuestoServices
    .controlModificaciones(fechaDesde, fechaHasta)
    .then((data) => {
      Swal.close();
      this.list = data;
    })
    .catch((error) => {
      Swal.close();
      this.showError(error.response.data);
    });
},
  abrirPopupListadoPresupuestoHistorial(item) {
  this.popupPresupuestoHistorial = true;
  console.log(item.id);
  // this.list[0].presupuestoHistorial = item.id;
  },
  },
  };
 </script>

Answer 1

<tr v-for="item in list" :key="item.id">

这条线基本上是在整个项目列表上循环，并且根本不使用您选择的项目。

添加到您的数据功能的新属性以存储所选项目。将所选项目分配给该属性并在弹出窗口中使用它来渲染您需要的任何详细信息。

Answer 2

在v-dialog

，而不是迭代整个

list
• 。您只需要根据您在

  abrirPopupListadoPresupuestoHistorial

  方法中传递的项目ID从列表数组中滤除对象

  您将仅在对话框内显示选定的项目详细信息。您可以直接绑定过滤的对象而不是使用V-FOR，因为它始终包含所选的

  <v-dialog>

  详细信息。您可以使用

  array.find（）

  方法仅根据传递的ID获取对象。
  

demo（仅出于演示目的，我将项目ID作为3）：
• ：

item.id

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      popupPresupuestoHistorial: false,
      list: [{
        id: 1,
        observacion: 'observacion 1',
        name: 'name 1'
      }, {
        id: 2,
        observacion: 'observacion 2',
        name: 'name 2'
      }, {
        id: 3,
        observacion: 'observacion 3',
        name: 'name 3'
      }, {
        id: 4,
        observacion: 'observacion 4',
        name: 'name 4'
      }, {
        id: 5,
        observacion: 'observacion 5',
        name: 'name 5'
      }],
      dialogList: []
    }
  },
  methods: {
    openDialog(itemID) {
     this.popupPresupuestoHistorial = true;
     this.dialogList = this.list.find(({ id }) => id === itemID) 
    }
  }
})