javascript - 以编程方式实例化 vuetify-components

Question

我正在尝试以编程方式实例化 vuetify-components 并将它们添加到 DOM 中。使用 v-card 或 v-dialoge 等简单组件可以正常工作，但不能与 v-data-tables 一起使用。

我创建了一个codesandbox来展示这个问题:https://codesandbox.io/s/throbbing-butterfly-4ljhx?file=/src/components/MainWindow.vue

单击添加表按钮时查看控制台中的错误。

任何人都可以帮我了解如何添加表以及为什么它会抛出这些类型错误吗？谢谢!

顺便说一句。我正在遵循本指南:https://css-tricks.com/creating-vue-js-component-instances-programmatically/

Answer 1

您需要将 vuetify 实例传递到扩展 Vue 构造函数中，就像实例化主 Vue 实例时一样...

MainWindow.vue

<template>
  <v-app>
    <v-btn @click="addTable" color="red">Generate Data-Table</v-btn>
    <hr>
    <v-btn @click="addCard">Generate simple Card</v-btn>
    <v-container ref="mainContainer"></v-container>
  </v-app>
</template>

<script>
import Table from "./Table.vue";
import Card from "./Card.vue";
import Vue from "vue";
import vuetify from "../plugins/vuetify";

export default {
  name: "mainWindow",
  components: { Table, Card },
  methods: {
    addTable() {
      var ComponentClass = Vue.extend(Table);
      var instance = new ComponentClass({ vuetify });
      instance.$mount();
      this.$refs.mainContainer.appendChild(instance.$el);
    },
    addCard() {
      var ComponentClass = Vue.extend(Card);
      var instance = new ComponentClass({});
      instance.$mount();
      this.$refs.mainContainer.appendChild(instance.$el);
    }
  }
};
</script>

<style>
</style>

注意:这不是在 Vue 中使用动态组件的推荐方式!

来自链接的文章:

In my case, I don’t know which component to insert in the template and also where to insert it. This information is only available at runtime

仅当您不知道“哪里”时这才有用。如果您知道“哪里”，“哪个”部分可以通过 Dynamic Components 轻松解决