programing

구성 요소 메서드에서 데이터에 액세스할 수 없습니다.

prostudy 2022. 7. 27. 21:44
반응형

구성 요소 메서드에서 데이터에 액세스할 수 없습니다.

vue js에서 컴포넌트 메서드를 시도했습니다.내 코드는 이렇습니다.

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

근데 제가 이걸 쓰려고 하면{{ data.count }}템플릿에 있습니다.내가 원하는 결과를 보여주지 않는다.반품하려고 해도 결과는GetData.

내 문제가 뭐야?그리고 방법에서 데이터에 액세스하는 방법은? 도와주세요. 저는 초보입니다.고마워요.

아래에 추가한 편집 코드와 코멘트를 참조해 주세요.
다음을 사용하여 결과를 반환하려고 했습니다.return에서 기능하여setTimeout이 방법으로는 값을 반환할 수 없습니다.GetData.
대신 ajax 요청의 콜백 함수로 값을 설정할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/45340951/cannot-access-data-from-component-method

반응형