Vue.js $emit arguments not rendering a dynamic component?

Question

What I'm trying to achieve:

I'm attempting to add a number of different component block types to the parent App.vue component on a click event from within a child of App.vue, using the $emit process and dynamic components.

What I have thus far:

Child component (ButtonSidebar.vue):

<template>
  <div>
    <b-button class="btn-circle absolute-float-tight text-dark" v-on:click="reveal=!reveal">
      <font-awesome-icon v-if="!reveal" :icon="faPlusIcon" />
      <font-awesome-icon v-if="reveal" :icon="faMinusIcon" />
    </b-button>
    <transition name="custom-classes-transition" enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutRight">
      <div v-if="reveal" class="absolute-float-reveal">
        <b-button class="btn-circle text-dark" v-on:click="addCodeBlock"><font-awesome-icon :icon="faCodeIcon" /></b-button>
      </div>
    </transition>
  </div>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import faPlus from '@fortawesome/fontawesome-pro-regular/faPlus'
import faMinus from '@fortawesome/fontawesome-pro-regular/faMinus'
import faCode from '@fortawesome/fontawesome-pro-regular/faCode'

export default {
  name: 'ButtonSidebar',
  computed: {
    faPlusIcon () {
      return faPlus
    },
    faMinusIcon () {
      return faMinus
    },
    faCodeIcon () {
      return faCode
    }
  },
  components: {
    FontAwesomeIcon
  },
  data () {
    return {
      reveal: false
    }
  },
  methods: {
    addCodeBlock () {
      this.$emit('addPageBlock', 'CodeBlock')
    },
    addQuoteBlock () {
      this.$emit('addPageBlock', 'QuoteBlock')
    }
  }
}
</script>

Parent component (App.vue):

<template>
  <div id="app" class="container">

    <ButtonSidebar @add="addPageBlock"/>

    <div id="pageBlocks" ref="container">
      <component v-for="pageBlock in pageBlocks" v-bind:is="pageBlock.component" v-bind:key="pageBlock.id"></component>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

import ButtonSidebar from './components/modules/ButtonSidebar'
import CodeBlock from './components/modules/CodeBlock'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

export default {
  name: 'App',
  components: {
    AddTitle,
    AddSubTitle,
    ButtonSidebar,
    CodeBlock
  },
  data () {
    return {
      pageBlocks: []
    }
  },
  methods: {
    addPageBlock (componentName) {
      this.pageBlocks.push({ component: componentName })
    }
  }
}
</script>

And for prosperity, my basic CodeBlock component:

<template>
  <div :class="type">
    THIS IS A CODE BLOCK!!
  </div>
</template>

<script>
export default {
  name: 'CodeBlock',
  props: [ 'type' ]
}
</script>

For some reason, the v-on:click:"addCodeBlock" event is working, but the subsequent firing of the emit to the parent component is not working ... I've tried to console.log but nothing is going through...can anyone point me in the right direction?

Answer 1

The ButtonSidebar emits an addCodeBlock event but here

<ButtonSidebar @add="addPageBlock"/>

The parent is listening for an add event.

Try changing it like so:

<ButtonSidebar @addCodeBlock="addPageBlock"/>