0
233
ViewsLa acción ocurre para todos los elementos en v-for pero quiero ejecutar la acción solo en el elemento en el que hice clic
Tengo un ícono en el bucle v-for y quiero que la acción se realice específicamente para ese ícono, pero sucede con todos los íconos que se repiten debido a v-for .
<template> <div> <tr v-for="(randomData, randomIndex) in obj['randomData']" :key="randomIndex" class="random-table" > <td data-label="Activity Alert"> <el-popover v-model="remindMeVisibility" placement="left-start" width="500" trigger="manual" class="popover-form" > <RemindMe /> <i slot="reference" class="el-icon-message-solid reminder-icon" @click="remindMeVisibility = true" ></i> </el-popover> </td> </tr> </div> </template> <script> export default { data() { return { remindMeVisibility: false, } }, } </script>
·
Juan Pablo Isaza
1 answers
Answer question0
Aquí hay un ejemplo práctico sobre cómo tener una edición emergente específica por elemento para una lista determinada.
<template> <div> <pre>{{ cityNames }}</pre> <section> <div v-for="city in cityNames" :key="city.id"> <span>City {{ city.name }}</span> <el-popover v-model="city.popoverOpen" placement="top" width="160" class="popover"> <el-button slot="reference">Update visibility</el-button> <p>Change the visibility of the City?</p> <div style="text-align: right; margin: 0"> <el-button size="mini" type="text" @click="toggleCityVisibility({ id: city.id, visibility: false })"> Hide it </el-button> <el-button type="primary" size="mini" @click="toggleCityVisibility({ id: city.id, visibility: true })"> Make visible </el-button> </div> </el-popover> </div> </section> </div> </template> <script> export default { data() { return { cityNames: [ { id: 1, name: 'beijing', remindMeVisibility: false, popoverOpen: false, }, { id: 2, name: 'shanghai', remindMeVisibility: false, popoverOpen: false, }, { id: 3, name: 'guangzhou', remindMeVisibility: false, popoverOpen: false, } ] }; }, methods: { toggleCityVisibility({ id, visibility }) { console.log('id', id, 'visibility', visibility) this.targetedCity = this.cityNames.find(city => city.id === id) this.targetedCity.remindMeVisibility = visibility } }, } </script> <style scoped> .popover { margin-left: 1rem; } </style> Aquí tenemos una lista de ciudades y queremos alternar su visibilidad ( remindMeVisibility ).
La id en la lista se proporcionó para :key + encuéntrela más adelante al editar la visibilidad de la misma.
No esperaba que se requiriera popoverOpen aquí, pero lo es (un estado de popover global no es factible por lo que he intentado).
Así es como se ve
·
Juan Pablo Isaza
Report
Answer question