Framework7-Vue Swipeout

Swipeout issue

by Sebastien Cramatte

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<script src="https://unpkg.com/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main>
      <f7-page>
        <f7-navbar>
          <f7-nav-left>
          </f7-nav-left>
          <f7-nav-title>App</f7-nav-title>
          <f7-nav-right>
          </f7-nav-right>
        </f7-navbar>
        
         <f7-list>
          <f7-list-item v-for="(item,index) in list" :key="index" :title="`${item}`" swipeout>
            <f7-swipeout-actions right>
              <f7-swipeout-button color="red" @click="onDelete(item, $event)">Delete</f7-swipeout-button>
            </f7-swipeout-actions>
          </f7-list-item>
        </f7-list>
 
        <f7-block>
          <pre v-html="prettyJSON(list)"></pre>
        </f7-block>
      </f7-page>
    </f7-view>
    </f7-app>
</div>

CSS

pre {
	overflow: auto;
}
	pre .string { color: #885800; }
	pre .number { color: blue; }
	pre .boolean { color: magenta; }
	pre .null { color: red; }
  pre .key { color: green; }

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue)
    
// Init App
new Vue({
  el: '#app',
  methods: {
    prettyJSON: function (json) {
        if (json) {
            json = JSON.stringify(json, undefined, 4)
            json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function (match) {
            var cls = 'number'
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                cls = 'key'
                } else {
                cls = 'string'
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean'
            } else if (/null/.test(match)) {
                cls = 'null'
            }
            return '<span class="' + cls + '">' + match + '</span>'
            })
        }
    },
  	onDelete: function(item, event) {
       
       console.log(event)
       	/*
       let self = this
        let app = self.$f7
		
    		app.swipeout(event.target, (item) => {
       		this.list.splice(this.list.indexOf(item), 1)
        })
				*/
    		
    }
  },
  data() {
  	return {
		  list: [
      	'abc',
        'def',
        'ghi'
      ],
    	f7params: {
      	root: '#app', // App root element
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        // App routes
        routes: [
        ]
      }
    }
  },
});