페이지 로드 시 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 형식을 하여 필터: file 레레블 file file file file file file file file file file file file file file file file file file file file file file

<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 컴포넌트의 마운트 전 섹션에서 다음과 같이 호출할 수 있습니다.

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

작업중 : https://jsfiddle.net/q83bnLrx/1/

Vue는 다음과 같은 다양한 라이프 사이클 훅을 제공합니다.

다음은 몇 가지 목록입니다.

1. before Create: 인스턴스가 초기화되고 데이터 관찰 및 이벤트/워처 설정 전에 동기적으로 호출됩니다.
2. created : 인스턴스 작성 후 동기 호출됩니다.이 단계에서 인스턴스는 데이터 관찰, 계산된 속성, 메서드, 워치/이벤트 콜백 등의 옵션이 설정되었음을 의미합니다.그러나 아직 마운트 단계가 시작되지 않아 $el 속성을 사용할 수 없습니다.
3. beforeMount: 마운트가 시작되기 직전에 호출됩니다. 렌더 함수가 처음 호출됩니다.
4. mounted: 인스턴스가 마운트된 후 호출됩니다. 여기서 el은 새로 생성된 것으로 대체됩니다.vm.$el.
5. before Update: 데이터가 변경되었을 때, 가상 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)
}
....

주의해 주세요.mounted이벤트는 컴포넌트에서 실행되며 모든 Vue 컴포넌트가 아직 교체되지 않았기 때문에 DOM은 아직 최종적이지 않을 수 있습니다.

DOM을 실제로 시뮬레이트하려면onload이벤트, 즉 DOM이 준비되었지만 페이지를 그리기 전에 부팅하려면 vm을 사용합니다.$nextTick 내부로부터의 체크:

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

어레이에 데이터가 있는 경우 다음과 같이 할 수 있습니다.나는 효과가 있다

    <template>
    {{ id }}
    </template>
    <script>

    import axios from "axios";

        export default {
            name: 'HelloWorld',
            data () {
                return {
                    id: "",

                }
            },
    mounted() {
                axios({ method: "GET", "url": "https://localhost:42/api/getdata" }).then(result => {
                    console.log(result.data[0].LoginId);
                    this.id = result.data[0].LoginId;
                }, error => {
                    console.error(error);
                });
            },
</script>

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