페이지로드시 vue.js 함수를 호출하는 방법

페이지로드시 vue.js 함수를 호출하는 방법

---

데이터 필터링에 도움이되는 기능이 있습니다. v-on:change사용자가 선택을 변경할 때 사용 하고 있지만 사용자가 데이터를 선택하기 전에도 호출 할 함수가 필요합니다. 나는 AngularJS이전에 사용했던 것과 똑같은 일 을 ng-init했지만 그런 지시가 없다는 것을 이해합니다.vue.js

이것은 내 기능입니다.

getUnits: function () {
        var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};

        this.$http.post('/admin/units', input).then(function (response) {
            console.log(response.data);
            this.units = response.data;
        }, function (response) {
            console.log(response)
        });
    }

에서 blade파일 나는 필터를 수행하기 위해 블레이드 양식을 사용 :

<div class="large-2 columns">
        {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
    </div>
    <div class="large-3 columns">
        {!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!}
    </div>

특정 항목을 선택하면 제대로 작동합니다. 그런 다음 모두를 클릭 all floors하면 작동합니다. 내가 필요한 것은 페이지가로드 될 때 빈 입력으로 getUnits수행 할 메서드를 호출 하는 것 $http.post입니다. 백엔드에서는 입력이 비어 있으면 모든 데이터를 제공하는 방식으로 요청을 처리했습니다.

에서 어떻게 할 수 vuejs2있습니까?

내 코드 : http://jsfiddle.net/q83bnLrx

---

다음과 같이 Vue 구성 요소의 beforeMount 섹션 에서이 함수를 호출 할 수 있습니다 .

 ....
 methods:{
     getUnits: function() {...}
 },
 beforeMount(){
    this.getUnits()
 },
 ......

작업 바이올린 : https://jsfiddle.net/q83bnLrx/1/

Vue가 제공하는 다양한 수명주기 후크가 있습니다.

몇 가지를 나열했습니다.

1. beforeCreate : 인스턴스가 방금 초기화 된 후 데이터 관찰 및 이벤트 / 감시자 설정 전에 동 기적으로 호출됩니다.
2. created : 인스턴스가 생성 된 후 동 기적으로 호출됩니다. 이 단계에서 인스턴스는 옵션 처리를 완료했습니다. 즉, 데이터 관찰, 계산 된 속성, 메서드, 감시 / 이벤트 콜백이 설정되었음을 의미합니다. 그러나 마운트 단계가 시작되지 않았으며 $ el 속성을 아직 사용할 수 없습니다.
3. beforeMount : 마운트가 시작되기 직전에 호출됩니다. 렌더링 함수가 처음으로 호출됩니다.
4. mount : 인스턴스가 방금 마운트 된 후 호출되며 el이 새로 생성 된 것으로 대체됩니다 vm.$el.
5. beforeUpdate : 가상 DOM이 다시 렌더링되고 패치되기 전에 데이터가 변경 될 때 호출됩니다.
6. updated : 데이터 변경 후 호출되어 가상 DOM이 다시 렌더링되고 패치됩니다.

여기 에서 전체 목록을 볼 수 있습니다 .

자신에게 가장 적합한 후크를 선택하고 위에 제공된 샘플 코드와 같은 기능을 호출하도록 후크 할 수 있습니다.

---

다음과 같은 작업을 수행해야합니다 (페이지로드시 메서드를 호출하려는 경우).

new Vue({
    // ...
    methods:{
        getUnits: function() {...}
    },
    created: function(){
        this.getUnits()
    }
});

---

당신은 또한 이것을 사용하여 할 수 있습니다 mounted

https://vuejs.org/v2/guide/migration.html#ready-replaced

....
methods:{
    getUnits: function() {...}
},
mounted: function(){
    this.$nextTick(this.getUnits)
}
....

---

Beware that when the mounted event is fired on a component, not all Vue components are replaced yet, so the DOM may not be final yet.

To really simulate the DOM onload event, i.e. to fire after the DOM is ready but before the page is drawn, use vm.$nextTick from inside mounted:

mounted: function () {
  this.$nextTick(function () {
    // Will be executed when the DOM is ready
  })
}

참고URL : https://stackoverflow.com/questions/40714319/how-to-call-a-vue-js-function-on-page-load