為什么我不能在 vue.js 中觸發自定義事件？

Question

我有一個本地數據庫，將使用 pusher 進行更新。 該數據庫存儲在 JSON 中，組件將加載並過濾掉不需要的內容，因此無法向原始數據添加觀察者。

我的想法（如果有更好的解決方案請告訴我）是為自定義事件添加一個偵聽器，然后在更新數據庫時觸發此事件。 我能夠觸發的唯一事件是'CLICK'，帶有一個簡單的$('.vue-template').trigger('click');

這與我選擇作為目標的元素上的簡單@click="doSomething"配對。

這並不理想，因為我不想在任何點擊時獲取數據，但只有在更新數據庫時，所以我嘗試@customevent="doSomething"但它不起作用

有什么幫助嗎？

編輯：更多代碼

<template>
    <div class="listen listen-database-teachers"
         @dbupdate="testAlert">
        <span v-for="teacher in teachers"
              class="pointer btn btn-sm btn-default destroy-link"
              :data-href="computedHref(teacher)"
              :data-person="personIdentifier(teacher.person)"
              :data-personid="teacher.person_id">
        {{ personIdentifier(teacher.person) }} <span class="glyphicon glyphicon-remove"></span>
        </span>
    </div>
</template>

<script>
    export default {
        props: ['circleId'],
        data () {
            return {
                loading: false,
                teachers: null,
                error: null
            }
        },
        created () {
            // fetch the data when the view is created and the data is
            // already being observed
            this.fetchData();
        },
        methods: {
            fetchData() {
                this.error = this.teachers = this.categories = null;
                this.loading = true;

                var teachers = $(window).localDatabase('teachers', $(window).planner('currentSchoolId'));

                var searchCircle = this.circleId,
                    filtered_teachers = [];
                $.each(teachers, function(index, teacher){
                    if(teacher.membership_id == searchCircle)
                        filtered_teachers.push(teacher);
                });
                this.teachers = filtered_teachers.sort(function(a, b) {
                    return personIdentifier(a.person) > personIdentifier(b.person);
                });

                this.loading = false;
            },
            computedClass(teacher){
                return 'pointer btn btn-sm btn-default draggable membership-draggable-'+teacher.membership_id+' destroy-link'
            },
            computedHref(teacher){
                return window.links.destroy_membership
                        + '?association-id='+teacher.id
                        + '&circle-id='+teacher.circle_id;
            },
            testAlert: function(){
                return alert('success');
            }
        }
    }
</script>

編輯 2：嘗試使用 BUS

請記住，我使用 Laravel Mix。

應用程序.js

window.vue_bus = new Vue();

大師.js

function handleDatabaseUpdate(){
    window.vue_bus.$emit('refresh-data');
}

零件

created () {
        // fetch the data when the view is created and the data is
        // already being observed
        this.fetchData();
        window.vue_bus.$on('refresh-data', this.testAlert());
    },

我已經隔離了代碼的相關位。 這會在安裝組件時執行testAlert() ，但是當我從瀏覽器控制台（在 Firefox 上）調用handleDatabaseUpdate()時，它會返回錯誤cbs[i] undefined 。

Answer 1

這是我可能使用事件總線的情況。

通過簡單地創建一個空的 Vue 來創建總線。

const bus = new Vue()

在處理數據庫的任何外部功能中，您都可以使用總線發出事件。

function handleDatabaseUpdate(){
   //do database things
   bus.$emit("refresh-data")
}

然后在您的組件中，添加一個處理程序。

created(){
    bus.$on("refresh-data", this.fetchData)
}

由於看起來您使用的是單個文件組件，因此您必須使總線對組件和數據庫管理器都可用。 你可以通過兩種方式做到這一點。 又快又臟，把公共汽車暴露在窗戶上。

window.bus = new Vue()

其次，您可以在自己的模塊中創建總線，並將模塊導入到您需要使用它的所有地方。

總線.js

import Vue from "vue"

const bus = new Vue()
export default bus;

在處理數據庫的代碼和您的組件中，導入總線。

import bus from "/path/to/bus.js

也就是說，你不能在 Vue 中監聽 jQuery 事件的原因是 jQuery 使用它自己的事件系統，而 Vue 的監聽器永遠不會捕捉到 jQuery 事件。 如果您仍然想使用 jQuery，您可以在 jQuery 中發出一個自定義事件，並使用 jQuery 監聽該自定義事件。 您只需將事件分派給 fetchData。

created(){
    $("thing you sent the event from").on("refresh-data", this.fetchData)
}

最后，這也是狀態管理系統（如 Veux）大放異彩的一個案例。 狀態管理系統適用於這樣的情況，其中狀態可能在許多地方發生變化並自動在視圖中反映這些變化。 當然，實施它們還有更多工作要做。