Событие Vue Bus с реквизитом выполняется только один раз

Question

Мне трудно понять, почему шина событий генерирует сигнал только один раз между двумя компонентами Vue.

Взаимодействие кнопок заключается в открытии панели дочерних компонентов и последующей динамической / ленивой загрузке пары компонентов диаграммы.Затем при втором выполнении закройте панель и уничтожьте динамически загружаемые компоненты.Цикл функций работает, но только один раз.

ОБНОВЛЕНИЕ:

После добавления некоторых компонентов пользовательского интерфейса в директиву <q-card> я обнаружил, что this.toggleChartPanel()переключает при каждом взаимодействии с событием кнопки.Похоже, что реквизит загружается только в первый раз, когда нажата кнопка.

Пример кода с пояснениями был бы очень признателен.

Компонент, содержащий emit:

<script>
import Store from '@store'
import BaseHrsBtn from './_base-hrs-btn'

export default {
  name: 'TotHrs',
  parent: 'LogSummaryWidget',

  components: {
    BaseHrsBtn,
  },

  data() {
    return {
      dynamicCharts: {
        dynamicChartA: 'test-line-chart',
        dynamicChartB: 'test-line-chart'
      }
    }
  },

  computed: {
    totHrs () {
      return Store.state.fetchLogSummary.data.total
    },
  },

  methods: {
    emitChartPanelToggle () {
      this.$bus.$emit('chart-panel-toggled', this.dynamicCharts)
      this.dynamicCharts = {}
    },
  },
}
</script>


<template>

  <base-hrs-btn
    class="col-6 col-md-4"
    :hours="totHrs"
    icon="clock"
    title="TOT"
    @click.native="emitChartPanelToggle"
  />

</template>

<script>
export default {
  name  : 'ChartPanel',
  parent: 'LogSummaryWidget',

  components: {
    TestLineChart: () => import("./_charts/test-line-chart"),
  },

  data () {
    return {
      chartPanelOpen: false,
      dynamicChartA: '',
      dynamicChartB: '',
    }
  },

  created() {
    this.$bus.$on('chart-panel-toggled', ({ dynamicChartA, dynamicChartB}) => {
      this.toggleChartPanel()
      this.dynamicChartA = dynamicChartA
      this.dynamicChartB = dynamicChartB
    });
  },

  beforeDestroy() {
    this.$bus.$off('chart-panel-toggled');
  },

  methods: {
    toggleChartPanel () {
      this.chartPanelOpen = !this.chartPanelOpen
    }
  },
}
</script>


<template>

  <q-card
    v-show-slide="chartPanelOpen"
    class="q-mx-md"
  >
    <component :is="dynamicChartA"></component>
    <component :is="dynamicChartB"></component>

  </q-card>

</template>

Кроме того, как я могу гарантировать, что $bus.$on тоже срабатывает асинхронно?

Answer 1

Я случайно оставил это в:

this.dynamicCharts = {}

Удаление исправило это.