How to use f7-popover in f7-swiper-slide, f7 and vuejs?

1

I have the following structure, going through an arrangement with images

<f7-swiper pagination navigation :params="propiedadesSlider">
                        <f7-swiper-slide
                            v-for="(imagen, index) in imagenes_servicio"
                            :key="index">
                            <div class="swiper-zoom-container">
                                <f7-link popover-open=".popover-menu">
                                    <p>{{index}}</p>
                                    <img :src="imagen.enlace" width="50%">
                                </f7-link>
                                <f7-popover class="popover-menu" >
                                       <p>{{index}}</p>
                                    <f7-list>
                                        <f7-list-item link="#" popover-close title="Seleccionar principal" @click="imagenSeleccionada(index)"></f7-list-item>
                                        <f7-list-item link="#" popover-close title="Eliminar"></f7-list-item>
                                    </f7-list>
                                </f7-popover>
                            </div>
                        </f7-swiper-slide>
                         
                    </f7-swiper>

method:

imagenSeleccionada(index){
    console.log("INDEX IMAGE");
    console.log(index);
 }

but the index is only the first image of the arrangement, and indeed the slider if you show the images correctly, the detail arises when using a method and get the index of each image.

Thank you

2

Buenas, tenes q crear un popover para cada img con distintas clases;
fijate en los cambios:

 <f7-link :popover-open="'.popover-menu-' + index">
...
<f7-popover :class="'popover-menu-' + index">

codigo:

      <f7-swiper pagination navigation :params="propiedadesSlider">
        <f7-swiper-slide v-for="(imagen, index) in imagenes_servicio" :key="index">
          <div class="swiper-zoom-container">
            <f7-link :popover-open="'.popover-menu-' + index">
              <p>{{index}}</p>
              <img :src="imagen.enlace" width="50%" />
            </f7-link>
            <f7-popover :class="'popover-menu-' + index">
              <p>{{index}}</p>
              <f7-list>
                <f7-list-item
                  link="#"
                  popover-close
                  title="Seleccionar principal"
                  @click="imagenSeleccionada(index)"
                ></f7-list-item>
                <f7-list-item link="#" popover-close title="Eliminar"></f7-list-item>
              </f7-list>
            </f7-popover>
          </div>
        </f7-swiper-slide>
      </f7-swiper>

resultado:
jsfiddle

2 Likes
3

Muchas gracias amigo, bendiciones.