페이지 로드 시 기능을 호출하기 위해 Vue.js2에서 사용할 라이프사이클 후크를 선택하십시오.

페이지 로드 시 기능을 호출하기 위해 Vue.js2에서 사용할 라이프사이클 후크를 선택하십시오.

잠재적으로 임의 수의 행(예: 3, 3800 등)으로 채워질 수 있는 테이블이 있으므로 데이터를 채우기 전에 오버레이를 적용하십시오(이미 함수가 있음).applyOverlay()그것을 위하여여기 내 HTML:

<table id="table" class="datatable" style="width:100%">
    <thead>
        /* table header */
    </thead>
    <tbody>
        <tr v-for="(item, index) in items" item="item">
            <td v-text="item.Name"></td>
            /* more <td> */
        </tr>
    </tbody>
</table>

여기 제 자바스크립트가 있다.

var tblItems = [ /* items */ ];

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    }
});

jQuery's를 사용해 보았다.$(document).ready. 그러나 페이지가 로드되는 것을 보고(테이블이 아직 채워지지 않음), 내 오버레이는 몇 초 후에(테이블이 채워질 때까지) 적용되지 않는다.나는 html 로딩이 끝나는 대로 오버레이를 적용하고 싶다.나는 그들의 라이프사이클에 대해 읽었지만 어떤 갈고리를 사용해야 할지 잘 모르겠다.나의applyOverlay()바닐라 자바스크립트인데 부에 의존하지 않는다.

편집: 사용해 본 결과mounted,beforeMount,created그리고beforeCreate그리고 아무 소용이 없었다.나는 그것이 jQuery와 관련이 있는지 궁금하다.하지만 내 jQuery는 Vue를 로드하기 전에 먼저 로딩한다.

나는 당신이 "장착된" 것을 찾고 있다고 생각한다.

var tblItems = [ /* items */ ];

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    },
    mounted: function() {
        //init table here because table template is available
    }
});

다음과 같이 생성되고 마운트된 라이프 사이클 후크 또는 마운트 전 후크를 사용할 수 있다.

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    },
    mounted () {
      // Your code needed to be executed on page load
    }
});

applyOverlay() 함수를 Vue 객체의 메서드 속성에 추가할 수 있다.그런 다음 마운트 전처럼 라이프사이클 후크를 사용하여 해당 메서드를 호출하십시오.사용 가능한 후크에 대한 보다 철저한 설명을 위해 사우라브에는 여기에 좋은 목록이 있다.

var app = new Vue({ 
    el: '#table',
    data: {
        items: tblItems
    },
    methods: {
        applyOverlay: function() {
             //code for applying overlay
        }
    }
    beforeMount: function() {
        this.applyOverlay();
    }
});

아래에 설명된 내용을 참조하십시오.예제는 HTML 클래스 바인딩을 사용하여 오버레이를 추가한다.

var tblItems = [ /* items */ ];

var app = new Vue({
  el: '#table',
  data: {
    items: tblItems,
    status: '',
    overlay: false
  },
  beforeMount() {
    this.applyOverlay();
    setTimeout(this.setUnits, 1500);
  },
  methods: {
    applyOverlay: function() {
      this.overlay = true;
      this.status = "overlay applied";
    },
    setUnits: function() {
      this.overlay = false;
      this.items = [{
        Name: "A",
        status: "done"
      }, {
        Name: "B",
        status: "in transit"
      }];
      this.status = 'set items, overlay removed';
    }
  }
});

.datatable {
  text-align: center;
}

tfoot {
  font-size: small;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  /*dim the background*/
  background-color: rgba(0, 0, 0, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<table id="table" class="datatable" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in items" item="item">
      <td v-text="item.Name"></td>
      <td v-text="item.status"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Status: {{ status }}
        <div v-bind:class="{overlay: overlay}"></div>
      </td>
    </tr>
  </tfoot>
</table>

참조URL: https://stackoverflow.com/questions/42955412/which-lifecycle-hook-to-use-in-vue-js2-to-call-function-on-page-load