如何從 javascript function 調用 vue 方法？

Question

我正在嘗試從 javascript function 調用 vue 方法，但無法使其工作。 我試圖調用的方法是app.onChangePlant(val)事實證明該值沒有被調用。

是不是因為我聲明javascript function的時候vue還不可用？

這是我收到的錯誤

plant-consumer:222 Uncaught TypeError: app.onChangePlant is not a function
    at onChangePlantSelect (plant-consumer:222)
    at HTMLSelectElement.onchange (plant-consumer:399)
    at Object.trigger (app.js:14973)
    at HTMLSelectElement.<anonymous> (app.js:15045)
    at Function.each (app.js:6863)
    at jQuery.fn.init.ea

代碼：

<script type="module" defer>
    const setting = {
        url: {
            findUsage: "{{ route('admin.plant-consumer.find-usage') }}",
            usageCsvDownload: "{{ route('admin.plant-consumer.usage-csv-download') }}",
        },
        date: {
            date_default: moment("{{ $defaultDate }}", 'YYYY/MM/DD').toDate()
        }
    };
    const app = new Vue({
        el: '#app',
        data: {
            url: setting.url,
            plantId: '',
            isLoading: false,
            rangeFilter: 'daily',
            byMonth: false,
            csvDownloadUrl: '',
            date: setting.date.date_default,
            month: setting.date.date_default,
            // datepicker用設定
            DatePickerFormat: 'yyyy/MM/dd',
            MonthPickerFormat: 'yyyy/MM',
            disabledDates: {
                from: new Date()
            },
            ja_vdp: vdp_translation_ja.js
        },
        components: {
            'vuejs-datepicker': vuejsDatepicker
        },
        watch: {
            rangeFilter: function () {
                this.byMonth = this.rangeFilter === 'monthly';
                this.getData(1);
            },
        },
        methods: {
            onChangePlant: function(event) {
                this.plantId = event.target.value;
                this.getData(1);
            },
            onChangeDate: function () {
                this.getData(1);
            },
            onChangeMonth: function () {
                this.getData(1);
            },
            getData: function(page) {
                let that = this;
                let date = that.date;
                that.isLoading = true;
                that.csvDownloadUrl = '';
                if (that.byMonth) {
                    date = that.month;
                }
                if(that.plantId && ((date)))
                {
                    let data = {
                        plant : that.plantId,
                        date : that.formatDateForRequest(date),
                        byMonth: that.byMonth,
                        page : page,
                    };
                    let url = that.url.usageCsvDownload
                            + '?plant=' + data.plant
                            + '&date=' + data.date
                            + '&byMonth=' + data.byMonth;

                    // console.log(url);
                    $.ajax(
                    {
                        url: that.url.findUsage,
                        type: "get",
                        datatype: "html",
                        data: data,
                        cache: false
                    }).done(function(data){
                        $("#consumer_table_generate").empty().html(data);
                        that.csvDownloadUrl = url;
                    }).fail(function(jqXHR, ajaxOptions, thrownError){
                        alert('No response from server');
                    }).always(function() {
                        that.isLoading = false;
                    });
                }
                else
                {
                    $("#consumer_ratio_body").empty();
                    that.isLoading = false;
                }
            }
        },
        mounted: function () {
            let vueObj = this;

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $(document).on('click', '.pagination a', function(event)
            {
                event.preventDefault();

                let $this = $(this);
                $('#consumer_table_generate li').removeClass('active');
                $this.parent('li').addClass('active');

                var page = $this.attr('href').split('page=')[1];

                vueObj.getData(page);
            });
        }
    });

    $(document).ready(function () {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

    });

</script>

<script>
    function onChangePlantSelect(val) {
        console.log(val);
        app.onChangePlant(val);
    };
</script>

Answer 1

const App = {
        data: {
            url: setting.url,
            plantId: '',
            isLoading: false,
            rangeFilter: 'daily',
            byMonth: false,
            csvDownloadUrl: '',
            date: setting.date.date_default,
            month: setting.date.date_default,
            // datepicker用設定
            DatePickerFormat: 'yyyy/MM/dd',
            MonthPickerFormat: 'yyyy/MM',
            disabledDates: {
                from: new Date()
            },
            ja_vdp: vdp_translation_ja.js
        },
        components: {
            'vuejs-datepicker': vuejsDatepicker
        },
        watch: {
            rangeFilter: function () {
                this.byMonth = this.rangeFilter === 'monthly';
                this.getData(1);
            },
        },
        methods: {
            onChangePlant: function(event) {
                this.plantId = event.target.value;
                this.getData(1);
            },
            onChangeDate: function () {
                this.getData(1);
            },
            onChangeMonth: function () {
                this.getData(1);
            },
            getData: function(page) {
                let that = this;
                let date = that.date;
                that.isLoading = true;
                that.csvDownloadUrl = '';
                if (that.byMonth) {
                    date = that.month;
                }
                if(that.plantId && ((date)))
                {
                    let data = {
                        plant : that.plantId,
                        date : that.formatDateForRequest(date),
                        byMonth: that.byMonth,
                        page : page,
                    };
                    let url = that.url.usageCsvDownload
                            + '?plant=' + data.plant
                            + '&date=' + data.date
                            + '&byMonth=' + data.byMonth;

                    // console.log(url);
                    $.ajax(
                    {
                        url: that.url.findUsage,
                        type: "get",
                        datatype: "html",
                        data: data,
                        cache: false
                    }).done(function(data){
                        $("#consumer_table_generate").empty().html(data);
                        that.csvDownloadUrl = url;
                    }).fail(function(jqXHR, ajaxOptions, thrownError){
                        alert('No response from server');
                    }).always(function() {
                        that.isLoading = false;
                    });
                }
                else
                {
                    $("#consumer_ratio_body").empty();
                    that.isLoading = false;
                }
            }
        },
        mounted: function () {
            let vueObj = this;

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $(document).on('click', '.pagination a', function(event)
            {
                event.preventDefault();

                let $this = $(this);
                $('#consumer_table_generate li').removeClass('active');
                $this.parent('li').addClass('active');

                var page = $this.attr('href').split('page=')[1];

                vueObj.getData(page);
            });
        }
    }
const app = Vue.createApp(App)

const vm = app.mount('#blog-posts-demo')

vm.remove(123456)

//通過這種方式，您可以保證應用程序在您調用時已正確安裝

Answer 2

我不知道您為什么要這樣做，但如果有必要，您可以嘗試使用 window 事件監聽器：

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

在您的組件中，您可以添加一個調用您的方法的事件監聽器，在 js 腳本標簽中您可以觸發一個事件，如果您的組件准備好它將調用該方法。

在這只是一個理論之前我從來沒有這樣做過:)

編輯：我試過了，但是當你想在腳本標簽中觸發事件時，你的組件沒有掛載