मैं vue-jd-table का उपयोग कर रहा हूं, सरल ऐप बनाने की कोशिश कर रहा हूं प्री-सेट डेटा ऑब्जेक्ट के साथ (एपीआई अनुरोध करने की कोई आवश्यकता नहीं है)। आधिकारिक उपयोग गाइड के बाद, मैं ऐप को इनिशियलाइज़ और कॉन्फ़िगर करने में कामयाब रहा, लेकिन इसे डेटा लोड नहीं कर सकता।

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>

/घटक/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>

प्रोग्राम सफलतापूर्वक संकलित करता है, डेटा के बिना तालिका बनाता है, और एपीआई अनुरोध की नकल करने के लिए, मैं इसे "मुझे क्लिक करें" पर क्लिक पर डेटा से भरना चाहता हूं। दुर्भाग्य से, इसे क्लिक करने से कुछ नहीं होता है।

मुझे किसकी याद आ रही है?

0
Spawn 6 पद 2019, 00:16

1 उत्तर

सबसे बढ़िया उत्तर

यह एक गुंजाइश मुद्दा की तरह दिखता है। this.eventFromApp App.vue में मौजूद नहीं है। HelloWorld.vue के सभी रूपों को App.vue में ले जाएं और इसे काम करना चाहिए। जैसा कि अभी है, App.vue में आपके तरीकों का JD-Table घटक के साथ संचार करने का कोई तरीका नहीं है।

यदि आप अपने बटन को JD-Table कंपोनेंट से अलग करना चाहते हैं तो आपको हैलोवर्ल्ड.vue कंपोनेंट के प्रोप के माध्यम से डेटा को क्लिक पास करना होगा जो इसे JD-टेबल पर भेज देगा।

1
Vidarious 6 पद 2019, 19:06