0

Hello good morning, I am having this problem, I have 2 tables, a main table that has a button that opens a popup with the second table. What is the idea? That if I click on the button of the first table and first option it would have to show me only the information of that element, in the popup I make a console.log(item.id) and it shows me the data of that element well , but when I open the popup it shows me all the data.. it must be something that I am overlooking, thank you very much

enter image description here

<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>
Improve this question

2 Answers 2

Reset to default
0

It seems that in your popup, you are rendering the same thing as in the main table. Please look at the following line in your popup:

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

This line basically loops over the entire list of items and is not at all using the item you selected.

Add a new property to your data function to store the selected item. Assign your selected item to that property and use it in your popup to render out any details you need.

Improve this answer
1
  • Let's see if I understand, from the first table the data returns several budget properties, among them it returns an array of presupuestoHistorial , in the second table I need to show the presupuestoHistorial information of that budget. This is what the first table returns, I want to show the presupuestoHistorial array in the second table {…}DATA PRESUPUESTOS presupuestoHistorial: Array(1) 0: {…} length: 1 ob: Observer {value: Array(1), dep: Dep, vmCount: 0} [[Prototype]]: Array
    – Kike gonzalez
    Commented Jul 27, 2022 at 17:59
0

Observations :

  • In v-dialog, Instead of iterating the whole list. You have to just filtered out the object from the list array based on the item id you passed in abrirPopupListadoPresupuestoHistorial method and then use that object inside the <v-dialog> to show the data based on the selected record only.
  • As you are going to show only selected item details inside the dialog. You can directly bind the filtered object instead of using v-for as it will always contain the selected item.id details. You can use Array.find() method to just get the object based on the id passed.

Demo (Just for a demo purpose I am passing item ID as 3) :

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) 
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-btn @click="openDialog(3)">Open Item 1 Details</v-btn>
    <div class="text-center">
    <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">Comentario</th>
                  <th class="text-left">Usuario</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{ dialogList.observacion }}</td>
                  <td>{{ dialogList.name }}</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>
    </div>
  </v-app>
</div>

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.