web-dev-qa-db-ja.com

load vue.jsでコンポーネントメソッドを実行する

ちょっと私はVue.jsにかなり慣れていないので、単純なことのように思えるものを達成しようとしていますが、私は問題を抱えています。基本的に、コンポーネントがDOMにロードされるたびに、そのメソッドの1つが起動するように必要です。現在のコードは次のとおりです。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イベントを使用すると、同じコードが正常に機能します

javascriptvue.jsvue-component
20
Zak A

インスタンスライフサイクルフック があり、これに使用できます。例えば：

Vue.component('graph', {
    props:['graphId','graphData'],
    template: '<canvas></canvas>',
    created: function () {
        alert('{{graphId}}');
    },
    methods: {}
});
27
str

次のように、「this」で始まる関数を呼び出す必要があります。

var data =
{
   cashiers: []
}

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

});
2
Mohammed Osman