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

choasia · Accepted Answer · 2017-07-27 04:05:25Z

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();
      }
    });
  });
});

answered Jul 27, 2017 at 4:05

choasia

10.9k6 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

userpr Over a year ago

I tried your code, but my {{ data.count }} not showing. Is it true ? using {{ data.count }} ?

userpr Over a year ago

OMG, my mistakes. I forget count : {}. Now its working. Thanks you so much

Collectives™ on Stack Overflow

Cannot access data from component method

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related