How can I render a new instance of vue component dynamically with dynamic props data

Question

I have a vue component with the following implementation interface.

<my-data-grid :colunms='columns' :rows='rows'></my-data-grid>

I need to render the above component dynamically on multiple tabpages with different data. Each my-data-grid is rendered at different times. It is like ones a new set of data comes in then a new page is created that renders component. Presently It works with columns and rows props updating properly but overrides the data on the other tabpages once a new data comes in.

When I tried to do this dynamically so that the component can be rendered at run time, the component showed but the columns and rows props are not updated. It was showing data() is undefined.

Part of my code is shown below. You can also make reference to this link Render other components in Tab using template

Import MyDataGrid from "./MyDataGridComponent'
Vue.component('my-data-grid', MyDataGrid)
export default {
  name: 'app',
  data: function() {
    return {
      headerText0: {
        text: 'Tab1'
      },
      columns: ['some arrays'],
      rows: ['some arrays'],
      headerText1: {
        text: 'Tab2'
      },
      headerText2: {
        text: 'Tab3'
      },
      Content1: function() {
        return {
          template: Vue.component('MyDataGrid', {
              template: ' <my-data-grid :colunms='columns' :rows = 'rows' > < /my-data-grid>',
              data() {
                return {
                  colunms: this.columns,
                  rows: this.rows
                }
              }
            )
          }
        }
      }
    }
  }

I have searched internet for the past 3 days and I am somehow exhausted. This is my first time asking question on stackoverflow, in case I am off point please forgive me. Thanks in anticipation of your assistance.

score 14 · Accepted Answer · answered Oct 31 '18 at 15:10

@Jim thanks for your response, after much searching I was able to get the solution from this article: https://css-tricks.com/creating-vue-js-component-instances-programmatically/. I solve it by using Vue.extend to create a copy of MyDataGrid component as shown below.

The following line imports my vue component

import MyDataGrid from "./MyDataGridComponent.vue";

I pass the MyDataGrid component to Vue.extend to create a subclass of the Vue constructor
```
var MyDataGridClass = Vue.extend(MyDataGrid);
```
And then create an instance out of it with the new keyword: propsData provides the data nedded for the columns and rows props in my vue component.
```
var instance = new MyDataGridClass({
  propsData: { columns: this.columns, rows: this.rows }
});
```
I mount the instance on an empty element
```
instance.$mount()
```

I used native javascript api to insert it inside a DOM element on my page.

var tab  = document.getElementById('#mytab')
tab.appendChild(instance.$el)

The complete code is shown below.

import Vue from "vue";
import MyDataGrid from "./MyDataGridComponent.vue";

export default {
data: function () {
  return {
    columns: ['some array'],
    rows: ['some array']
  }
},
methods: {
  addTab() {
    var ComponentClass = Vue.extend(MyDataGrid);
    var instance = new ComponentClass({
      propsData: { columns: this.columns, rows: this.rows }
    });
    instance.$mount()
    var tab  = document.getElementById('#mytab')
    tab.appendChild(instance.$el)
  }
}
};

Sometimes challenges are the fertilizers for creativity. Seek and you shall find.

score 0 · Answer 2 · answered Oct 30 '18 at 15:13

0

properties are defined on a component using 'props'. You're defining rows and columns as the component's local data.

Move rows and columns out of the data field, and add a props field:

props: ['rows', 'columns'],

answered Oct 30 '18 at 15:13

Jim B.

4,512
3
25
53

Thanks for the reply. Actually I am aware of that and I have tried it as you suggested, it didn't work. I think in this case according to the source on the link I posted they used those dynamic props under data. Please feel free to check this link [here](https://ej2.syncfusion.com/vue/documentation/tab/how-to.html) – Damilinks Oct 30 '18 at 19:41
I'm assuming the typos in your template are from transcribing to the question. It might help to break this down into a smaller test case, maybe on jsfiddle or codepen or similar. – Jim B. Oct 31 '18 at 01:17

How can I render a new instance of vue component dynamically with dynamic props data

2 Answers2