Как я могу рендерить новый экземпляр компонента VUE динамически с динамическими данными реквизита - PullRequest
Новая
       12

Как я могу рендерить новый экземпляр компонента VUE динамически с динамическими данными реквизита

0 голосов
/ 30 октября 2018

У меня есть компонент VUE со следующим интерфейсом реализации. 

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

Мне нужно динамически визуализировать вышеуказанный компонент на нескольких вкладках с разными данными. Каждая сетка my-data отображается в разное время. Это как новые наборы данных, затем создается новая страница, которая отображает компонент. В настоящее время он работает с корректным обновлением реквизитов столбцов и строк, но переопределяет данные на других вкладках после поступления новых данных.

Когда я попытался сделать это динамически, чтобы компонент мог отображаться во время выполнения, компонент показывал, но реквизиты столбцов и строк не обновлялись. Показывает, что данные () не определены.

Часть моего кода показана ниже. Вы также можете сделать ссылку на эту ссылку Визуализация других компонентов во вкладке с использованием шаблона 

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
                }
              }
            )
          }
        }
      }
    }
  }

Я искал интернет последние 3 дня, и я как-то измотан. Я впервые задаю вопрос по stackoverflow, на случай, если я перестал работать, пожалуйста, прости меня. Спасибо в ожидании вашей помощи.

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

@ Джим, спасибо за ваш ответ, после долгих поисков мне удалось найти решение из этой статьи: https://css -tricks.com / creation-vue-js-component-instances-programmatics /, Я решаю это с помощью Vue.extend для создания копии компонента MyDataGrid, как показано ниже.

  1. Следующая строка импортирует мой компонент vue 

    import MyDataGrid from "./MyDataGridComponent.vue";

  2. Я передаю компонент MyDataGrid в Vue.extend , чтобы создать подкласс конструктора Vue 

    var MyDataGridClass = Vue.extend(MyDataGrid);

  3. И затем создайте из него экземпляр с новым ключевым словом: propsData предоставляет данные, вложенные для столбцов и строк реквизитов в моем компоненте vue. 

    var instance = new MyDataGridClass({
  propsData: { columns: this.columns, rows: this.rows }
});

  4. I mount экземпляр на пустой элемент 

    instance.$mount()

  5. Я использовал нативный API javascript, чтобы вставить его в элемент DOM на моей странице. 

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

Полный код показан ниже. 

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)
  }
}
};

Иногда проблемы являются удобрениями для творчества. Ищите, и вы найдете.

0 голосов
/ 30 октября 2018

свойства определены для компонента с помощью «реквизита». Вы определяете строки и столбцы как локальные данные компонента.

Переместите строки и столбцы из поля данных и добавьте поле реквизита: 

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