Запустить метод компонента при загрузке vue.js

эй, я новичок в Vue.js, и я пытаюсь выполнить то, что кажется простым, но у меня проблемы. По сути, мне это нужно, чтобы каждый раз, когда компонент загружался в DOM, срабатывал один из его методов. Вот мой текущий код, я пытался использовать v-on:load, но, похоже, он не работает.

Vue.component('graph', {
    props:['graphId','graphData'],
    template: '<canvas v-on:load="{{populateGraph()}}"></canvas>',
    methods: {
        initGraph: function () {
            var settlementBalanceBarChart = new Chart(this.graphId, {
                type: "bar",
                data: settlementBalanceBarData,
                options: settlementBalanceBarOptions
            });
        },
        //this is the function I would like to run
        populateGraph: function () {
            alert('{{graphId}}');
        }
    }

});

var vm = new Vue({
    el: "#app",
    mounted: function(){

    }

});

Тот же код работает нормально, если я использую событие v-on:click


javascript vue.js vue-component
person Zak A    schedule 18.11.2016    source источник

Ответы (2)


arrow_upward
32
arrow_downward

Для этого можно использовать перехватчики жизненного цикла экземпляра. Например:

Vue.component('graph', {
    props:['graphId','graphData'],
    template: '<canvas></canvas>',
    created: function () {
        alert('{{graphId}}');
    },
    methods: {}
});
person str    schedule 18.11.2016
comment
created() запускается один раз после завершения рендеринга? - person Aria; 04.01.2020

arrow_upward
4
arrow_downward

Вы должны вызвать функцию с префиксом «this» следующим образом:

var data =
{
   cashiers: []
}

var vm = new Vue({
    el: '#app',
    data: data,
    created: function () {
       this.getCashiers();
    },
    methods: {
         getCashiers: function () {
          vm.cashiers = [];
         }
    }

});
person Mohammed Osman    schedule 19.11.2018
comment
По какой причине вы пишете функцию getCashiers в объявлении методов, а не в созданном объявлении? - person kaleidawave; 20.08.2019
comment
Объявления методов — это правильное место для написания методов. created объявления — это место, где вы можете вызывать методы после того, как компонент полностью создан. - person Mohammed Osman; 22.08.2019
comment
@kaleidawave Несмотря на то, что в этом случае это может показаться бесполезным, создание его внутри методов является хорошей практикой, полезной, например, когда вам нужно вызвать тот же метод при создании и других событиях. - person lucasreta; 11.03.2021