[SOLVED] Why Framework7 send same HTTP request in so many times?

Hi Vladimir, I found Framework7 send same HTTP request in so many times? and the back link of navigation was not work. Could you know what happened and how do I fixed?

<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>

Framework7 doesn’t send anything on its own. Your code is wrong, follow one of the official templates examples http://framework7.io/templates/. You should never call new Framework7() in Framework7-Vue app

getDataItems: function(){
   console.log('init');
}

See how many times it’s being called, and then

getDataItems: function(){
      console.log('init');
      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;
        }
      })
    }

Not sure if items redraw would trigger reinit

I also see you use sockjs. Can you try to isolate that for testing?

@nolimits4web thank you for your reply. but I am not clear in your templates examples. Although You said I should never call new Framework7() in Framework7-Vue app, but how do i get Framework7 instance? I got error message ‘[Vue warn]: Error in created hook: “TypeError: Cannot read property ‘request’ of undefined”’ when i used follow code :

let app = this.$f7;
app.request.json('http://172.18.84.213:8181/camel/rest/redheadapplys' ...........

Please tell me the detail.

@plague69 I got follow result with your idea. The init was called 11 times. So how can I fix it.

It is initiated automatically inside of f7-app component.

You should get F7 instance as this.$f7 in component. If it is not available, e.g. you see the error, then call it within $f7ready:

this.$f7ready((f7)=>{
  // do something with `f7`
})

@nolimits4web Hi Vladimir, I modified my code with your command, but there was still a lot of HTTP connection of same request. Could you please help me to review it ? I am beginner of Framework7. I fond it very useful. I strongly expect you to give me any advice.

<template>
  <f7-page >
    <!--<f7-page @pageReinit="getDataItems">-->
    <f7-navbar title="红头文件申请" back-link="Back"></f7-navbar>
    <f7-block-title>
      <f7-button round fill raised href="/oa/workflow/applyRedHeadTable/-1"  >添加</f7-button>
    </f7-block-title>
    <f7-block-title></f7-block-title>
    <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:after="item.docStatus"
        v-bind:subtitle="item.businessNo"
        v-bind:text="item.orgName"
        @swipeout:open="saveCurItem(item)"
        @swipeout:deleted="delRecord">
        <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">
      <f7-actions-group>
        <f7-actions-button  @click="checkDetail">查看</f7-actions-button>
        <f7-actions-button v-show="isShow('编辑')" @click="editDetail">编辑</f7-actions-button>
        <f7-actions-button v-show="isShow('启动')" @click="startApproval">启动</f7-actions-button>
        <f7-actions-button v-show="isShow('删除')" @click="delRecord">删除</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 {
    name: "applyRedHead",
    data() {
      return {
        items: [],
        curItem:null
      }
    },
    created() {
      this.$f7ready((f7)=>{
        let that = this;
        f7.request.setup({
          headers: {
            'AccessToken': sessionStorage.getItem('accessToken'),
            'JSESSIONID': sessionStorage.getItem('userToken')
          }
        });
        console.log('init');
        f7.request.json('http://172.18.84.213:8181/camel/rest/redheadapplys', {
          'page': 1,
          'limit': 10,
          'jsonStr': '',
          'otherStr': '',
          'start': '0'
        }, function (result) {
          if (result.success === undefined) {
            that.items = result.data;
          }
        })
      })

    },
    watch: {
      items: {
        handler(){

        },
        deep:true
      }
    },
    methods: {
      
      isShow: function(label) {
        let status = -1;
        let that = this;
        if(that.curItem == null) {
          return false;
        }
        status = that.curItem.status;
        switch(status){
          case 0 :
            if (label.includes("编辑")){
              return true;
            } else if (label.includes("启动")){
              return true;
            } else if (label.includes("删除")){
              return true;
            }
            break;
          case 1:
            if (label.includes("编辑")){
              return false;
            } else if (label.includes("启动")){
              return false;
            } else if (label.includes("删除")){
              return false;
            }
            break;
          case 2:
            if (label.includes("编辑")){
              return false;
            } else if (label.includes("启动")){
              return false;
            } else if (label.includes("删除")){
              return false;
            }
            break;
        }
      },
      saveCurItem:function (item) {
        this.curItem = item;
      },
      checkDetail:function () {
        this.$f7router.navigate("/oa/redheadapply/" + this.curItem.id)
      },
      editDetail: function () {
        this.$f7router.navigate("/oa/workflow/applyRedHeadTable/" + this.curItem.id)
      },
      delRecord: function () {
        let url = "http://172.18.84.213:8181/camel/rest/redheadapplys/" + this.curItem.id;
        fetch(url,
          {method: "delete",
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              'AccessToken': sessionStorage.getItem('accessToken'),
              'JSESSIONID': sessionStorage.getItem('userToken')
            },
          }).then (function (response) {
            if (response.status == 200){
              this.showAlert("提示","记录删除成功")
            }else {
              this.showAlert("提示","删除记录失败")
            }
          }).catch(function(err){
            console.log("Fetch错误",err)
        });
      },
      startApproval: function () {
        let that = this;
        let url = "http://172.18.84.213:8181/camel/rest/redheadapplys/workflow/startProcess" ;
        let app = that.$f7;
        app.dialog.confirm("流程启动后业务数据将无法修改!确定要启动吗?","提示", () => {
          app.request.json(url, { 'id': that.curItem.id, }, function (result) {
             that.showAlert("提示", result["msg"])
             if(result.success == true) {
               that.getDataItems();
             }
          })
        })
      },
      showAlert: function (title, text) {
        let app = this.$f7;
        app.dialog.alert(text, title, () => {
          this.$f7router.back();
        });
      }
    },
  }

</script>

<style scoped>

</style>

Code doesn’t tell me much. Would be good to see live example

@nolimits4web Thanks, My issue have fixed.already. the problem was the same as you said in previous…

“You should get F7 instance as this.$f7 in component. If it is not available, e.g. you see the error, then call it within $f7ready:”