Vue.js - Event does not trigger child component to show requested data in table

Question

I am using vue-jd-table, trying to make simple app with pre-set data object (no need to make API requests). Following official Usage guide, I managed to initialize and configure the app, but can't make it load data.

main.js

import Vue from 'vue'
import JDTable from 'vue-jd-table';
import App from './App.vue'

import "@fortawesome/fontawesome-free/css/all.min.css";
import 'vue-jd-table/dist/jd-table.min.css';

Vue.config.productionTip = false
Vue.component( 'jdtable',JDTable );
new Vue
({
  render: h => h(App),
}).$mount( '#app' );

App.vue

<template>
  <div id="app">
    <div @click="trigger" class="trigger">Click me</div>
    <HelloWorld></HelloWorld>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'app',
  components: {
    HelloWorld
  },
    methods :
    {
      trigger()
      {
        // Async call to a Vue method that returns a promise.
        let tableData =
        [
          {
              businessName : 'Burger King',
              founderName  : 'James McLamore'
          },
          {
              businessName : 'Mc Donalds',
              founderName  : 'Maurice McDonald'
          },
          {
              businessName : 'Wendies',
              founderName  : 'Dave Thomas'
          }
        ]

        this.eventFromApp =
        {
            name    : 'sendData',
            payload : tableData
        };
        this.triggerEvent();
      },
        // Triggers the currently queued JD-Table event to run.
        triggerEvent : function ()
        {
          // Trigger the event.
          this.eventFromAppTrigger = true;
          // Reset the trigger event.
          this.$nextTick( () =>
          {
            this.eventFromAppTrigger = false;
          });
        },
    }
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

/components/HelloWorld.vue

<template>
    <div id="app">
        <!-- JD-TABLE REQUIRED - TEMPLATE -->
        <JDTable
            :option                 = "tableOptions"
            :loader                 = "tableLoader"
            :event-from-app         = "eventFromApp"
            :event-from-app-trigger = "eventFromAppTrigger"
            @event-from-jd-table    = "processEventFromApp( $event )"
        />

        <!-- JD-TABLE REQUIRED - EXCEL EXPORT -->
        <iframe id="excelExportArea" style="display:none"></iframe>
    </div>
</template>

<script>
    // JD-TABLE REQUIRED - COMPONENT REGISTRATION
    import "@fortawesome/fontawesome-free/css/all.min.css";
    import JDTable from 'vue-jd-table';

    export default
    {
        name : 'MyApp',

        // JD-TABLE REQUIRED - COMPONENT REGISTRATION
        components:
        {
            JDTable
        },

        // JD-TABLE REQUIRED - OPTIONS/PROPS
        data ()
        {
            return {
                tableOptions        : { 
                                  columns :
                [
                    {
                        name          : 'businessName',
                        title         : 'Business Name',
                        order         : 1,
                        type          : 'String',
                        filterable    : true,
                        enabled       : true,
                        sort          : true,
                        sortDirection : 'asc',
                        width         : 50,
                    },
                    {
                        name        : 'founderName',
                        title       : 'Founder Name',
                        order       : 2,
                        type        : 'String',
                        filterable  : true,
                        enabled     : true,
                        width       : 50,
                    }
                ]
                },
                eventFromApp        : { name : null, data : null },
                eventFromAppTrigger : false,
                tableLoader         : false,
                columns             : [ ]
            }
        }
    }
</script>

<style lang="scss">
    // JD-TABLE OPTIONAL - VARIABLE OVERRIDE

    // JD-TABLE REQUIRED - THEME
    @import "~vue-jd-table/dist/assets/jd-table.scss";
</style>

Program compiles successfully, makes table without data, and to mimic API request, I want to fill it with data on click at "Click me". Unfortunately, clicking it does nothing.

What am I missing?

Answer 1

This looks like a scope issue. this.eventFromApp doesn't exist in App.vue. Move everything form HelloWorld.vue into App.vue and it should work. As it is right now, your methods in App.vue have no way of communicating with the JD-Table component.

If you want to separate your button to JD-Table component then you need to have the click pass the data via a prop to the HelloWorld.vue component which would then send it to JD-Table.