Uncaught TypeError: self.$setState is not a function at Object.success

[usefitg]

hi all
I want to display the user data in template which was fetched from a database but I am having this problem
( VM449:14 Uncaught TypeError: self.$setState is not a function
at Object.success (:14:17)
at r (framework7.js:3595)
at XMLHttpRequest.Request.f.onload (framework7.js:3774) )

and I can not find the solution

this is my template :

Profile

{{#if v_data}}

• empno: {{v_data.empno}}
• ename: {{v_data.ename}}
• job: {{v_data.job}}

{{else}}

{{/if}}

When I delete ( self.$setState({
v_data: v_data ,
})
it it works but the template appears empty like the attached image
can anyone help me and thanks …

[nolimits4web]

Did you notice that it is available from 3.1.0? http://framework7.io/docs/router-component.html#virtual-dom. If you on higher version then we need to see the whole code

[usefitg]

I note that it is available from 3.1.0
but i think i have a higher version
I have attached the template code but it did not appear fully at the top. I do not know the reason

this is my template :

<template>
<div class="page" data-name="form">
  <div class="navbar">
      <div class="navbar-inner">
          <div class="left">
        <a href="/index/"  class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
        <div class="title">Profile</div>
      </div>
    </div>
    <div class="page-content">
      {{#if v_data}}
      <!-- Show user list when it is loaded -->
      <div class="list simple-list">
        <ul>
          <li>empno: {{v_data.empno}}</li>
          <li>ename: {{v_data.ename}}</li>
          <li>Age: {{v_data.job}}</li>
        </ul>
      </div>
      {{else}}
      <!-- Otherwise show preloader -->
      <div class="block block-strong text-align-center">
        <div class="preloader"></div>
      </div>
      {{/if}}
    </div>
  </div>
</template>
<script>
  return {
    data: function () {
      return {
        // empty initial user data
        v_data: null,
      }
    },
    on: {

      pageInit: function () {
        var self = this;
        var app = self.$app;
          app.request.get('https://hmosvr.hmmosoft.com/apex/institutions_001/hr/employees/7698', function (v_data)  {
           self.$setState({
            v_data: v_data ,
          });
                              
  console.log(v_data);
  v_data = JSON.parse(v_data);
 console.log( this.v_data = v_data) ;
  console.log(v_data) ;
    
   console.log(v_data.empno) ;
  //if (v_data.deptno == 20) {

        console.log('navigate') ;
  

      
    
  //};
    
});
           

     },
    },
  };
</script>

[nolimits4web]

Do console.log what it says?

var self = this;
console.log(self);

[pvtallulah]

Hi,
you just open the console and write var self = this; console.log(self), right?
bcs you post an image of WINDOW, not f7 app

...your code
pageInit: function () {
  var self = this;
  console.log(JSON.stringify(self, null, 2))
...
}
...more code

and paste the text

[usefitg]

ya bro
i add
var self = this;
console.log(JSON.stringify(self, null, 2))
in template
note photo

[pvtallulah]

jsfiddle

do something like that, then paste the image, preferably text

[usefitg]

When I make debugger as a comment … the application works as shown in the picture
But when the debugger executes, the application does not work and the console appears empty

[pvtallulah]

but i think i have a higher version

Ok, just open de source frameworj7.js file and there you should see the version of it.

[pvtallulah]

Ok, so never mind, i made this small jsfiddle
with f7 v3.5.1
and it works fine, i think.

[usefitg]

thanks bro
I was wrong
i think my f7 version 3.1.0
but in fact it’s 3.0.0
please give me a way to view user data fetching from the server and put it in a template within the application for this version
and thanks

[pvtallulah]

sry dont know, i always used f7 with vuejs to manipulate the dom. try using Template7. I never use it, so i cannot help you there.
Can you just update to the lastes f7, or use f7-vue?

[usefitg]

I will update to the last version … I have not used f7-vue before …