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

Program / 글쓴이

데이터 필터링에 도움이되는 기능이 있습니다. 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)
}
....

답변

mounted구성 요소 에서 이벤트가 시작될 때 모든 Vue 구성 요소가 아직 교체되는 것은 아니므로 DOM이 아직 최종 상태가 아닐 수 있습니다.

DOM onload이벤트 를 실제로 시뮬레이션하려면 , 즉 DOM이 준비된 후 페이지가 그려지기 전에 실행하려면 내부에서 vm. $ nextTick 을 사용하십시오 mounted.

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>

답변