Cannot access data from component method

Question

I tried components methods in vue js. My code like this.

const Thread = Vue.component('threadpage', function(resolve) {
  $.get('templates/thread.html').done(function(template) {
    resolve({
      template: template,
      data: function() {
        return {
          data: {
            title: "Data Table",
            count: this.GetData
          }
        };
      },
      methods: {
        GetData: function() {
          var data =  {
            username : "newshubid",
            data :  {
              page : 0,
              length : 10,
              schedule : "desc"
            }
          };
          var args = {"data" : JSON.stringify(data)};
          var params = $.param(args);

          var url = "http://example-url";

          var result;

          DoXhr(url, params, function(response){
            result = JSON.parse(response).data;
            console.log("load 1", result);
          });

          setTimeout(function () {
            console.log("load 2", result);
            return result;
          }, 1000);
        }
      },
      created: function(){
        this.GetData();
      }
    });
  });
});

But, when I trying to use {{ data.count }} in template. Not showing result what i want. Even I tried return result in GetData.

Whats my problem ? And how to access data from methods ? Please help me, i'm a beginner. Thanks

Answer 1

See the edited code and comments I added below.
You tried to return the result by using return in the function from setTimeout, which won't help you return value from GetData.
Instead, You can just set the value in the callback function of your ajax request.

const Thread = Vue.component('threadpage', function(resolve) {
  $.get('templates/thread.html').done(function(template) {
    resolve({
      template: template,
      data: function() {
        return {
          data: {
            title: "Data Table",
            // NOTE just set an init value to count, it will be refreshed when the function in "created" invoked.
            count: /* this.GetData */ {}
          }
        };
      },
      methods: {
        GetData: function() {
          var data =  {
            username : "newshubid",
            data :  {
              page : 0,
              length : 10,
              schedule : "desc"
            }
          };
          var args = {"data" : JSON.stringify(data)};
          var params = $.param(args);

          var url = "http://example-url";

          var result;
          var vm = this;
          DoXhr(url, params, function(response){
            result = JSON.parse(response).data;
            // NOTE set data.count to responsed result in callback function directly.
            vm.data.count = result;
          });
          // NOTE I think you don't need code below anymore.
          // setTimeout(function () {
          //   console.log("load 2", result);
          //   return result;
          // }, 1000);
        }
      },
      created: function(){
        this.GetData();
      }
    });
  });
});