Swipeout not work in vue

Questions
1

in official vue demo “Framework7-Vue-Webpack-Template”, I add swipeout test code in home.vue as follow:

<template>
  <f7-page @page:init="onPageInit">
    <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-toolbar>
      <f7-link>Left Link</f7-link>
      <f7-link>Right Link</f7-link>
    </f7-toolbar>
    <f7-block strong></f7-block>

      <f7-list>
        <f7-list-item
          swipeout
          title="Swipe left on me please"
        >
          <f7-swipeout-actions right>
            <f7-swipeout-button @click="more">More</f7-swipeout-button>
            <f7-swipeout-button delete>Delete</f7-swipeout-button>
          </f7-swipeout-actions>
        </f7-list-item>
      </f7-list>

    <f7-block-title>Navigation</f7-block-title>
    <f7-list>
      <f7-list-item link="/about/" title="About"></f7-list-item>
      <f7-list-item link="/form/" title="Form"></f7-list-item>
    </f7-list>
    <f7-block-title>Modals</f7-block-title>
    <f7-block strong>
      <f7-row>
        <f7-col width="50">
          <f7-button fill raised popup-open="#popup">Popup</f7-button>
        </f7-col>
        <f7-col width="50">
          <f7-button fill raised login-screen-open="#login-screen">Login Screen</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>
    <f7-block-title>Panels</f7-block-title>
    <f7-block strong>
      <f7-row>
        <f7-col width="50">
          <f7-button fill raised panel-open="left">Left Panel</f7-button>
        </f7-col>
        <f7-col width="50">
          <f7-button fill raised panel-open="right">Right Panel</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>
    <f7-list>
      <f7-list-item link="/dynamic-route/blog/45/post/125/?foo=bar#about" title="Dynamic Route"></f7-list-item>
      <f7-list-item link="/load-something-that-doesnt-exist/" title="Default Route (404)"></f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
export default {
  methods: {
    more() {
      const self = this;
      self.actions.open();
    },
    onPageInit() {
      const self = this;
      const app = self.$f7;
      self.actions = app.actions.create({
        buttons: [
          [
            {
              text: 'Here comes some optional description or warning for actions below',
              label: true,
            },
            {
              text: 'Action 1',
            },
            {
              text: 'Action 2',
            },
          ],
          [
            {
              text: 'Cancel',
              bold: true,
            },
          ],
        ],
      });
    },
  }
}
</script>

The swipeout component does not work. My test step as follow:

  1. run “npm run dev”
  2. open url 127.0.0.1:8080 in chrome
  3. press f12 to call debug mode.
  4. press button named "toggle device toolbar " to call phone debug mode
  5. then swipe left on swipeout component. The component do not work.

After I had refreshed the url, It could work, but I don`t know why.

2

Not the issue, you should load app in device mode and not enable it during load

3

Hi Vladimir, thank you for your reply. I have other question. According you answer, the swipeout component worked well in my project. but in this situation, I found there are a lot of HTTP request, and the back link of navigation was not work. Could you know what happened?
My project code as follow :

<template>
  <f7-page @pageReinit="getDataItems">
    <f7-navbar title="待办流程" back-link="Back"></f7-navbar>
    <f7-list media-list>
      <f7-list-item
        swipeout
        v-for="item in items"
        v-bind:key="item.id"
        v-bind:title="item.title"
        v-bind:subtitle="item.businessNo"
        v-bind:text="item.createTime"
        v-bind:after="item.name"
        @swipeout:open="saveCurItem(item)">
        <f7-swipeout-actions right>
          <f7-swipeout-button close @click=" $refs.actionsOneGroup.open()">More</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
    </f7-list>

    <f7-actions ref="actionsOneGroup" right>
      <f7-actions-group>
        <f7-actions-button  @click="checkDetail">查看</f7-actions-button>
        <f7-actions-button  @click="admitApplication">审批</f7-actions-button>
      </f7-actions-group>
      <f7-actions-group>
        <f7-actions-button color="red">Cancel</f7-actions-button>
      </f7-actions-group>
    </f7-actions>

  </f7-page>
</template>
<script>
import Framework7 from 'framework7/framework7.esm.bundle.js'
var app = new Framework7();
export default {
  data () {
    return {
      items: [],
      curItem:null,
    }
  },
  created () {
    app.request.setup({
      headers: {
        'AccessToken': sessionStorage.getItem('accessToken'),
        'JSESSIONID': sessionStorage.getItem('userToken')
      }
    });
  },
  watch: {
    items: {
      handler(){

      },
      deep:true
    }
  },
  methods: {
    getDataItems: function(){
      let that = this;
      app.request.json('http://172.18.84.213:8181/camel/rest/workflow/tasks', {'page': 1, 'limit': 10, 'jsonStr': ''}, function (result) {
        if (result.totalCount >0) {
          that.items = result.data;
        }
      })
    },
    saveCurItem:function (item) {
      this.curItem = item;
    },
    checkDetail:function () {
      let item = this.curItem;
      this.$f7router.navigate('/oa/' + item.businessKey.split(':')[0] + '/' + item.entityId)
    },
    admitApplication: function () {
      let item = this.curItem;
      this.$f7router.navigate('/oa/admitL1/' + item.entityId + "/" + item.id)
    },
    showAlert: function (title, text) {
      app.dialog.alert(text, title, () => {
        this.$f7router.back();
      });
    },
  },

}
</script>

13
13.png1006×735 65.3 KB