即使我能看到在Vue控制台触发的事件

Question

我试图测试我的$on函数是否正常工作，但在事件$ emit发出时，Vue $未运行我的函数。我可以清楚地看到Vue控制台正在接收事件发送，但$on中的预定义回调函数未被调用。

下面是代码：

<template lang="html"> 
    <div class="test"> 
    <Filters></Filters> 
    <div> 
    <ul class="o-list c-stores"> 
     <Result v-bind:total="filteredRestuarants.length" v-bind:open="isOpen" v-on:toggle="toggleRestaurantList"></Result> 
     <li v-for="(restaurant, index) in filteredRestuarants" class="c-stores__location" :class="{'first': isFirst(index), 'last': isLast(index, restaurants)}"> 
     <Location :index="index" :store="restaurant" :link="() => setCurrentRestaurant(restaurant)"></Location> 
     </li> 
    </ul> 
    </div> 
    </div> 
</template> 

<script> 
import eventHub from './../../event-hubs/storefinder' 
import Location from './Location' 
import Filters from './Filters' 
import Result from './Result' 

export default { 
    props: ["restaurants", "isOpen", "currentSearch"], 
    data() { 
    return { 
     attributes : [], 
    } 
    }, 
    head: { 
    title: function() { 
     return { 
     inner: this.$t('storefinder.overview') 
     } 
    }, 
    meta: function functionName() { 
     return [{ 
      name: 'og:title', 
      content: this.$t('storefinder.overview') + ' - ' + this.$t('storefinder.name'), 
      id: "og-title" 
     }, 
     { 
      name: 'description', 
      content: this.$t('storefinder.description'), 
      id: "meta-description" 
     }, 
     { 
      name: 'og:description', 
      content: this.$t('storefinder.description'), 
      id: "og-description" 
     }, 
     ] 
    } 
    }, 
    components: { 
    Location, 
    Filters, 
    Result 
    }, 
    computed: { 
    filteredRestuarants(rest) { 
     let restaur = rest || this.restaurants; 
     return this.restaurants; 
    } 
    }, 
    methods: { 
    startEvents(){ 
     eventHub.$on('addFilterTheRestaurants', (attribute) => {console.log("test")}); 
     eventHub.$on('removeFilterTheRestaurants', (attribute) => {console.log("test")}); 
    }, 
    toggleRestaurantList() { 
     eventHub.$emit('showRestaurantList'); 
    }, 
    setCurrentRestaurant(restaurant) { 
     this.trackRestaurantSelect(restaurant.publicNameSlug); 
     this.$router.push({ 
     name: "store", 
     params: { 
      restaurant: restaurant.publicNameSlug 
     } 
     }); 
    }, 
    trackRestaurantSelect(restaurantName) { 
     dataLayer.push({ 
     'event': 'GAEvent', 
     'eventCategory': 'restaurants', 
     'eventAction': 'clickResult', 
     'eventLabel': restaurantName, 
     'eventValue': undefined, 
     'searchTerm': this.currentSearch && this.currentSearch.toLowerCase(), 
     'amountSearchResults': 1 
     }); 
    }, 
    created() { 
     this.startEvents() 
     // eventHub.$on('addFilterTheRestaurants', (attribute) => this.filteredRestuarants.value = this.restaurants.forEach(rest => {console.log(rest)})); 
     // eventHub.$on('addFilterTheRestaurants', (attribute) => {console.log("test")}); 
     // eventHub.$on('removeFilterTheRestaurants', (attribute) => {console.log("test")}); 
    }, 
    beforeDestroy() { 
     bus.$off('addFilterTheRestaurants') 
     bus.$off('removeFilterTheRestaurants') 
    }, 
    isLast: function (idx, list) { 
     return idx === list.length - 1; 
    }, 
    isFirst: function (idx) { 
     return idx === 0; 
    }, 
    } 
} 
</script> 

ADN其正在这里emited：

<template lang="html"> 


<div class="c-filters"> 
    <div class="c-filters-list"> 
    // Here I call the function to $emit my event 
     <div class="c-filters__item" v-for="item in filters" @click="(e) => {toggleClass(e); addFilter(item)}"> 
     {{$t(`storefinder.store.attributes.${item}`)}} 
     </div> 
    </div> 
    </div> 
</template> 

<script> 
import {getKeys} from './../../i18n/' 
import eventHub from './../../event-hubs/storefinder' 
import notificationHub from './../../event-hubs/notification' 
import GLSApi from './../../api/gls' 

export default { 
    data() { 
    return { 
     attributes: null, 
     filters : [ 
     "WIFI", 
     "TABLESERVICE", 
     "MCCAFE", 
     "INDOORDINING", 
     "DRIVETHRU", 
     "BREAKFAST", 
     "MALEFEMALEHANDICAPACCESSIBLE", 
     "BABYCHANGING", 
     "BIRTHDAYPARTIES", 
     "SELFORDERKIOSK", 
     "OUTDOORPLAYGROUND", 
     "INDOORPLAYGROUND", 
     "JUNIORCLUB" 
     ] 
    } 
    }, 
    computed: { 
    getAttributes() { 
     let arr = this.attributes.map(elem => elem.storeAttributes.attribute) 
     return arr.map((el,index, array) => array[index].map(obj => obj.type)) 
    } 
    }, 
    methods: { 
    toggleClass(e){ 
     e.target.classList.contains("add-filter") ? e.target.classList.remove("add-filter") : e.target.classList.add("add-filter") ; 
    }, 
// here it the $emit happening 
    addFilter (item) { 
     eventHub.$emit('addFilterTheRestaurants', item); 
    }, 
    deleteFilter (item) { 
     eventHub.$emit('removeFilterTheRestaurants', item); 
    } 
    }, 
    beforeCreate() { 
    eventHub.$on('attributesLoaded', (params) => this.attributes = params); 
    } 
} 
</script> 

Answer 1

您在计算性能进行了注册你addFilterTheRestaurants事件。但是，除非计算属性被引用，否则不会调用计算属性的函数。由于你永远不会引用this.startEvents，函数永远不会执行。

您可以整天发出addFilterTheRestaurants事件，但没有事情发生，因为您尚未注册该事件。

只需在created钩子中注册$on处理程序。或者使用startEvents而不是计算属性，并在created钩子中调用它。但是，请确保您指定了created生命周期挂钩，而不是名为created的方法。