Как вызвать функцию vue.js при загрузке страницы

97

У меня есть функция, которая помогает фильтровать данные. Я использую, 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

javascript vue.js vuejs2 Филлис Питерс
источник

Ответы:

195

Вы можете вызвать эту функцию в разделе beforeMount компонента Vue: как показано ниже:

 ....
 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. обновлено : вызывается после того, как изменение данных вызывает повторную визуализацию и исправление виртуальной DOM.

Вы можете посмотреть полный список здесь .

Вы можете выбрать, какой крючок вам больше всего подходит, и подключить его для вызова вашей функции, как в примере кода, приведенном выше.

Саураб
источник
@PhillisPeters, ты можешь добавить больше кода или создать скрипку из него.
Saurabh
@PhillisPeters Пожалуйста, взгляните на обновленную скрипку , я заменил HTTP-вызов post на setTimeout для моделирования, теперь вы можете видеть данные, заполняемые в таблице.
Саураб,
@GeorgeAbitbol Пожалуйста, обновите ответ соответствующим образом.
Saurabh
Моя проблема заключалась в том, что я не знал, как использовать «this» в разделе смонтированного (), и получал ошибки функции undefined. «Это» используется выше, и я понял, что это было решение моей проблемы, но оно не выделено в ответе. Была ли проблема OP похожа на мою? Может ли добавление вызова для решения проблем привязки улучшить этот ответ?
mgrollins 04
31

Вам нужно сделать что-то вроде этого (если вы хотите вызвать метод при загрузке страницы):

new Vue({
    // ...
    methods:{
        getUnits: function() {...}
    },
    created: function(){
        this.getUnits()
    }
});
Альфа
источник
1
Попробуйте createdвместо этого.
Альфа
1
@PhillisPeters Вы можете использовать created или beforeMount.
Saurabh
3

Помните, что когда mountedсобытие запускается для компонента, еще не все компоненты Vue заменены, поэтому DOM может еще не быть окончательным.

Чтобы действительно имитировать onloadсобытие DOM , то есть запускать после того, как DOM будет готов, но до того, как страница будет отрисована, используйте vm. $ NextTick изнутри mounted:

mounted: function () {
  this.$nextTick(function () {
    // Will be executed when the DOM is ready
  })
}
ржавый
источник
0

Если вы получаете данные в массиве, вы можете сделать как показано ниже. Это сработало для меня

    <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>
субаш сапкота
источник