[Vuejs]-Instanciating extended VueJS components with props data within

by

0👍

✅

First, I think you don’t need to programatically instantiate your Chart components. A simple v-for loop will do the trick:

<template>
  <Chart v-for="table of chartTables :table-to-display="table"/>
</template>

<script>
...
data() {
   chartTables: []
},
methods: {
   createChart() {
      // Adding a new table to the array will create a new Chart component.
      this.chartTables.push(this.tableToDisplay)
   }
}
</script>

If this solution suits your needs, go ahead in that way!

That said, if you really need to instantiate a Vue component yourself, you have to use the propsData parameter to pass your props.

    const instance = new ChartClass({
      parent: this, // The parent is your current component
      propsData: {
        tableToDisplay: this.tableToDisplay,
      },
    })
    let divContainer = event.target.parentElement 
    instance.$mount(divContainer)

The parent option is really important: it adds your component to the Vue component dependency tree. Without it, your component won’t have inherited properties (such as the Vuex store, plugins etc.).

Leave a comment