Tengo un codigo que esta en VUEJS que almacena datos como (nombre, direccion, telefono y mapa) en un array, pero que en el html solo muestro el nombre , direccion y telefono por lo tanto quiero mostrar el dato (mapa) en un modal al presionar el boton ver mapa de cada elemento y devolver el valor de mapa segun el item o boton presionado. Gracias agradecere cualquier sugerencia o ayuda que se brinde.
//de momento en la propiedad methods: llamo al index y segun el boton que se presione cambia el estado a true y cambia las clases: estaba probando de esa manera.
class clasSede{
constructor(nombre,direccion,telefono){
this.nombre = nombre;
this.direccion = direccion;
this.telefono = telefono;
}
}
const app = new Vue({
el: '#app',
data:{
search:'',
sedesCorreos:[
{nombre:"SAN ISIDRO", direccion:"Av. Jorge Basadre 265 - San Isidro", telefono:"01-5439963",mapa:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3902.7528105136344!2d-77.07477358472353!3d-11.99159864414279!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105ce5be8ba21fb%3A0x292919764ae454a5!2sAv.+Carlos+Izaguirre+931%2C+Los+Olivos+15301!5e0!3m2!1ses-419!2spe!4v1561161587300!5m2!1ses-419!2spe"},
{nombre:"MIRAFLORES", direccion:"Av. Benavides 344 - Miraflores", telefono:"01-4459700", estado:false},
{nombre:"LINCE", direccion:"Jr. Tomás Guido 622 - Lince", telefono:"01-7481414", estado:false},
{nombre:"LOS OLIVOS", direccion:"Av. Carlos Izaguirre 931", telefono:"01-7768893", estado:false},
{nombre:"CALLAO", direccion:"Av. Saenz Peña 941 - Callao", telefono:"01 - 694 9645", estado:false},
{nombre:"LA VICTORIA", direccion:" Prolongación Huánuco 2051", telefono:"01-7768893", estado:false},
{nombre:"ABANCAY", direccion:"Jr. Huancavelica 413 - Apurímac", telefono:"083-323920", estado:false},
{nombre:"CAJAMARCA", direccion:"Av. Evitamiento Norte 1807 - 1809", telefono:"076-261847", estado:false},
{nombre:"CHIMBOTE", direccion:"Av. Pardo 1150 Santa", telefono:"043-281190", estado:false},
],
mapaSedes:[
{nombre:"SAN ISIDRO", mapa:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3902.7528105136344!2d-77.07477358472353!3d-11.99159864414279!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105ce5be8ba21fb%3A0x292919764ae454a5!2sAv.+Carlos+Izaguirre+931%2C+Los+Olivos+15301!5e0!3m2!1ses-419!2spe!4v1561161587300!5m2!1ses-419!2spe"},
{nombre:"MIRAFLORES", mapa:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3902.7528105136344!2d-77.07477358472353!3d-11.99159864414279!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105ce5be8ba21fb%3A0x292919764ae454a5!2sAv.+Carlos+Izaguirre+931%2C+Los+Olivos+15301!5e0!3m2!1ses-419!2spe!4v1561161587300!5m2!1ses-419!2spe"},
{nombre:"LINCE", mapa:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3902.7528105136344!2d-77.07477358472353!3d-11.99159864414279!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105ce5be8ba21fb%3A0x292919764ae454a5!2sAv.+Carlos+Izaguirre+931%2C+Los+Olivos+15301!5e0!3m2!1ses-419!2spe!4v1561161587300!5m2!1ses-419!2spe"},
{nombre:"LOS OLIVOS", mapa:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3902.7528105136344!2d-77.07477358472353!3d-11.99159864414279!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105ce5be8ba21fb%3A0x292919764ae454a5!2sAv.+Carlos+Izaguirre+931%2C+Los+Olivos+15301!5e0!3m2!1ses-419!2spe!4v1561161587300!5m2!1ses-419!2spe"},
]
},
computed:{
filteredList() {
return this.sedesCorreos.filter(clasSede => {
return clasSede.nombre.toLowerCase().includes(this.search.toLowerCase())
})
}
},
methods:{
showModal (index){
// console.log(index);
this.sedesCorreos[index].estado=true;
}
}
})
.vueSede {
background: #f0f4f8;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-bottom: 5em;
}
.vueSede .sedes-principal {
display: flex;
max-width: 1200px;
flex-wrap: wrap;
padding-top: 12px;
justify-content: center;
padding-top: 5em;
}
.vueSede .sedes-principal .sede-Vue {
width: 350px;
background: #fff;
border-top: 5px solid;
border-image: linear-gradient(to right, #4572d3 0%, #2d4d90 100%);
border-image-slice: 1;
border-radius: 8px;
display: block;
margin: 10px;
padding: 0.5em;
padding-left: 1.5em;
box-shadow: 0 0 3px #9e9e9e;
font-family: sans-serif;
font-size: 13px;
}
.vueSede .sedes-principal .sede-Vue:hover {
background: linear-gradient(90deg, #4572d3 0, #4066b8 25%, #2d4d90);
color: #fff;
transition: transform 0.8s linear;
transform: scale(1.1);
}
.vueSede .sedes-principal .sede-Vue p span {
font-weight: 700;
font-family: sans-serif;
font-size: 13px;
}
.vueSede .sedes-principal .sede-Vue .btnVue {
padding: 0.5em;
display: flex;
justify-content: center;
}
.vueSede .sedes-principal .sede-Vue .btnVue button {
background: #ff7400;
border-radius: 8px;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.5em;
padding-top: 0.5em;
color: #fff;
}
.vueSede .sedes-principal .sede-Vue .btnVue button i {
font-size: 18px;
font-weight: 900;
}
.vueSede .sedes-principal .sede-VueUno {
width: 350px;
background: #fff;
border-top: 5px solid;
border-image: linear-gradient(to right, #cc0d0d 0%, #0551f6 100%);
border-image-slice: 1;
border-radius: 8px;
display: block;
margin: 10px;
padding: 0.5em;
padding-left: 1.5em;
box-shadow: 0 0 3px #9e9e9e;
font-family: sans-serif;
font-size: 13px;
}
/*# sourceMappingURL=search.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="vueSede" id="app">
<div class="fond">
<p class="buscador">
<label> <strong>BUSCAR: SEDE DE CORREOS DEL PERÚ</strong></label>
<input id="buscador" type="text" placeholder="" v-model="search">
</p>
</div>
<div class="sedes-principal">
<div v-for="(sedefil, index) of filteredList" >
<!--<p> {{index}}</p>-->
<div :class="[sedefil.estado ? 'sede-Vue':'sede-VueUno' ]" >
<p><span>Nombre:</span> {{sedefil.nombre}}</p>
<p><span>Direccion:</span> {{sedefil.direccion}}</p>
<p><span>Telefono:</span> {{sedefil.telefono}}</p>
<p><span>estado:</span> {{sedefil.estado}}</p>
<div class="btnVue">
<button v-on:click="showModal(index)" class="btn btn-primary">ver mapa <i class="fas fa-angle-right"></i></button> <!-- falta definir evento click-->
</div>
</div>
</div>
</div>
</div>
a llamar.