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
<template>
<v-card>
<v-card-title>
Control Modificaciones
</v-card-title>
<v-card-text>
<v-row>
<v-col cols="12" md="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" >
<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" @click="buscar()">
Buscar
</v-btn>
</v-row>
</v-card-text>
<v-row>
<v-col cols="8" md="8" >
<v-card-text>
<v-simple-table>
<template>
<thead>
<tr>
<th >Nro Orden</th>
<th >Cliente</th>
<th >Tipo</th>
<th >Fecha Creacion</th>
<th >Fecha Ult Modificacion</th>
<th >Cant Modificada</th>
<th >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" >
<v-dialog
v-model="popupPresupuestoHistorial"
max-width="800px"
max-height="700px"
>
<v-card>
<v-card-title >
Listado de Presupuesto Historial.
</v-card-title>
<v-card-text>
<v-simple-table>
<template>
<thead>
<tr>
<th >Fecha</th>
<th >Comentario</th>
<th >Usuario</th>
<th >Datos Generales</th>
<th >Articulos Nuevos</th>
<th >Articulos Modifados</th>
<th >Articulos Eliminados</th>
<th >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>
CodePudding user response：
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.
CodePudding user response：
Observations :
- In
v-dialog, Instead of iterating the wholelist. You have to just filtered out the object from the list array based on the item id you passed inabrirPopupListadoPresupuestoHistorialmethod 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.iddetails. 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 >
<v-dialog
v-model="popupPresupuestoHistorial"
max-width="800px"
max-height="700px"
>
<v-card>
<v-card-title >
Listado de Presupuesto Historial.
</v-card-title>
<v-card-text>
<v-simple-table>
<template>
<thead>
<tr>
<th >Comentario</th>
<th >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>