简体   繁体   中英

Unable to use vue-c3 package component

I would like to use c3 charts in my vue js project so I downloaded this package https://github.com/chryb/vue-c3 First of all, I have problems with creating handler property in main component, due to the fact that example shows that we need to create this property with new Vue() value: handler: new Vue() and Vue returns error: Vue is not defined.

Secondly i dont understand why example shows event like: this.handler.$emit('init', options) . Shouldnt be it something like this.$emit('init', options) , cause the example ones returns an error?

Could someone explain how to properly use this vue-c3 package?

Here is my code:

Main component:

<template>
<div>
  <vue-chart @myEvent="init" :handler="handler"></vue-chart>    
</div>
</template>

<script>
import VueChart from '@/components/VueChart'

export default {
  name: 'HelloWorld',
  data () {
    return {
      handler: {}
    }
  },
  components: { VueChart }
}
</script>

Chart component:

<template>
    <div>
        Content
    </div>
</template>

<script>
export default {
    name: 'VueChart',
    props: ['handler'],
    mounted () {
        const options = {
            data: {
                columns: [
                    ['data1', 2, 4, 5],
                    ['data2', 1, 8, 9]
                ]
            }
        }
        this.$emit('init', options)
    }
}

</script>

Too late obviously, to be useful to the OP, but anyway:

import Vue from 'vue'

in the file where you write new Vue()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM