F7-V4 + Vue Swiper popover

by Maiki Nahara

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/css/framework7.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/js/framework7.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main class="safe-areas">
      <f7-page>
        <f7-navbar>
          <f7-nav-left>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
          </f7-nav-left>
          <f7-nav-title>My App</f7-nav-title>
          <f7-nav-right>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-list>
          <f7-list-item link="/page1/" title="Page 1"></f7-list-item>
        </f7-list>
      </f7-page>
    </f7-view>
  </f7-app>
</div>

<!-- Page 1 Template -->
<template id="page1">
  <f7-page>
    <f7-navbar title="Page 1" back-link="Back"></f7-navbar>
      <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...

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue);

// Init Page Components
Vue.component('page1', {
  template: '#page1',
  created() {
  },
  beforeDestroy() {
  },
  data () {
  return {
  		propiedadesSlider: {
      
      },
  		imagenes_servicio: [
      	{
        	enlace: 'http://lorempixel.com/200/200/'
        },
        {
        	enlace: 'http://lorempixel.com/200/200/'
        },
        {
        	enlace: 'http://lorempixel.com/200/200/'
        },
        {
        	enlace: 'http://lorempixel.com/200/200/'
        }
      ]
  	}
  },
  methods: {
    imagenSeleccionada(index) {
			alert(index)
    }
  }
});

Vue.component('page2', {
  template: '#page2',
  mounted() {},
  data() {
    return {
      history: ''
    }
  }
});

Vue.component('page-not-found', {
  template: '#page-not-found'
});

// Init App
new Vue({
  el: '#app',
  data: function() {
    return {
      f7params: {
        root: '#app',
        id: 'io.framework7.testapp',
        name: 'Framework7',
        theme: 'ios',
        view: {
          stackPages: false,
          allowDuplicateUrls: false
        },
        routes: [{
            path: '/page1/',
            component: 'page1'
          },
          {
            path: '/page2/',
            component: 'page2'
          },
          {
            path: '(.*)',
            component: 'page-not-found',
          },
        ],
      }
    }
  },
});