How to call ajax/request in component class/method

Questions
1

:one: there are ajax/requests inside component methods like shown here

:two: code

/* <template>
<div class="toolbar-inner segmented">
        <a
          href="#"
          @click="handleSave"
          class="button button-raised button-fill color-white margin-horizontal"
          style="background: #0dcd5d"
          >Save
        </a>
      </div>
</template> */
<script>
import {Component} from 'framework7'
export default class extends Component{
    beforeCreate(){
        this.handleSave = this.handleSave.bind(this);
    }
    mounted(){
        // ...
    }
    handleSave(){
    //....
        this.$f7.request.promise({
            // ....
        })
    }
}
</script>

:three: Above code logs:

TypeError: Cannot read property 'request' of undefined

:four: any way to call ajax inside component method :question:

2

You can use Request directly:

import { Component, Request } from 'framework7'
export default class extends Component{
    beforeCreate(){
        this.handleSave = this.handleSave.bind(this);
    }
    mounted(){
        // ...
    }
    handleSave(){
    //....
        Request.promise({
            // ....
        })
    }
}
1 Like
3

Thank you. you are always helpful
how can we import other components like Toast , dialog, chips, gauge

4

These must be used through this. To access this propely you need to bind it to component. Try to bind it like so:

export default class extends Component{
  constructor(...args) {
    super(...args)  
    this.handleSave = this.handleSave.bind(this);
  }