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。

app.js

window.vue_bus = new Vue();

master.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上）调用cbs[i] undefined时，它会返回错误handleDatabaseUpdate()。

Answer 1

我可能会使用event bus。

只需创建一个空的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()

其次，您可以在自己的模块中创建总线，并将模块导入到您需要使用它的所有位置。

<强> bus.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）会发光的情况。状态管理系统适用于这样的情况，其中状态可能在许多位置发生变化，并自动反映视图中的这些变化。当然，还有更多的工作要实现它们。

为什么我不能在vue.js中触发自定义事件？

1 个答案: