问题标签 [vue-dynamic-components]

我正在渲染一个动态组件：

和：

..但我得到了一个错误，Property or method "formId" is not defined on the instance but referenced during render.虽然我传递了道具。我究竟做错了什么？

我正在尝试制作一个页面，该页面会将文本字符串（https://pastebin.com/Mp9sKy1A）加载到页面中，然后用--FML-[componentName]适当的组件替换任何实例。

因此，例如--FML-[NoteBlock]将自动替换为NoteBlock组件。

这是我到目前为止所拥有的：

然后输出将被放置到以下模板中：

它实际上有点工作。然而，这component部分并没有作为一个实际的组件被拉入，而是一个<component>HTML 标记，这显然不是想要的结果。有没有办法让它按需要工作？

如果有人感兴趣，这里是完整的 SFC 文件：https ://pastebin.com/yb4CJ1Ew

这是我目前得到的输出：

<component>标签应该是实际的Vue 组件

我遇到了一个问题，即从动态组件 (或)swap-components发出的自定义事件 ( ) 在动态组件 ( ) 的父级中没有被正确收听。A.vueB.vueHelloWorld.vue

这是GitHub 上的源代码（使用 vue cli 3 创建）。

这是一个显示问题的现场演示。

在现场演示中，您将看到单击具有背景颜色的动态组件中的按钮不会更改动态组件。但是，当单击背景颜色下方的按钮（源自HelloWorld.vue父级）时，动态组件确实发生了变化。

为什么会发生这种情况以及如何解决？

下面我将把感兴趣的 3 个主要文件的内容复制到这篇文章中：

1. HelloWorld.vue（父母）

2. A.vue（动态组件中使用的子组件）

3. B.vue（动态组件中使用的子组件）

HelloWorld.vue：

A.vue：

B.vue：

我正在仪表板父项中呈现动态组件。如果有一个组件，它就会呈现。如果没有，那么......那么它没有。问题是我现在唯一的动态组件被渲染了两次。

我试过有条件地渲染等，但没有任何效果。

我将在这里发布一些代码，但你我正在研究沙盒，所以也许这样会更好。

没有控制台错误，只有几个警告。有任何想法吗？

我正在使用 Vue-form-wizard 创建多步骤表单。在其中一个步骤中，我正在加载一个动态组件，并使用 v-bind 和 props 将数据传递给动态组件。当我们在动态组件上时，数据会完美更新，但是当我进入下一步时，所有更改都会丢失并保留为父组件的默认值！我试过了，但这没有任何作用。这是发生的示例：html：

js将是：

请帮我。多谢

我正在使用 Vuetify 的navigation drawer. 导航结构来自 Vuex 商店。

这个想法是将导航结构存储到一个对象中并从那里构建导航，所以我选择使用动态组件<component :is="componentName"/>。

我有 2 个组件，它们需要不同的子组件，所以我尝试告诉基于当前组件dynamic component设置权限。child

这就是我得到的：

我做错了什么？

我有一个 Vue CLI 3 项目，它试图从基础组件的监视属性中动态加载组件。甚至可以在运行时像这样在本地动态注册组件吗？

只要我components先在属性中注册它们，我就可以动态导入组件。

基本组件如下所示：

子组件是

我知道上面的代码正在进行全局注册，这需要在App创建组件之前进行，但是有没有办法在本地注册它？

组件应该根据变量名注册子组件并渲染它，而Vue会抛出错误，因为组件没有注册：

deleteData()从同时用于创建动态组件的对象数组中删除元素后，我无法处理正确的渲染。

元素被正确删除，但它表现得好像组件不知道它应该刷新，并且 Vue 不知道数据已更改。

在chrome Vue扩展中，移除了正确的元素，但是DOM中的Vue移除了最后一个element()

视图：

零件：

在删除数据（）之前

在删除数据（）之后

我有一个动态加载组件的小型 Vue 应用程序
首先我编写了一个名为 SPA 的函数，该函数负责创建主应用程序并处理加载组件

然后我编写一个全局组件，该组件将从服务器获取并按需运行

我监听点击事件来加载组件，每次我需要加载一个组件时，我调用spa.setComponent
正如你在 SPA func 中看到的我如何加载组件
我测试加载脚本序列但是没关系，组件在我设置 currentView 之前创建.
现在我被卡住
了我的来源可能不好，但请关注问题，我需要了解发生了什么并解决它。
非常感谢您的帮助！

我正在为我的工程部门研究团队重新设计一个程序，我的应用程序是使用 Electron、Vuex、HTML/Sass/Javascript 构建的。该程序的目的是允许用户创建“步骤”，这些“步骤”是您可以进入并设置系统参数和流程以运行 X 次的项目/图块。在每个步骤中设置值和设置可能需要一段时间，因此如果用户创建了 5 个步骤，并意识到他们想要完全删除第 2 步，则每个步骤中需要有一个“删除”或一个小“x” /物品。目前，我只能使用“pop”函数删除最后一个填充的步骤/项目，以删除数组“stepsGrid”中的最后一个项目。

使用 vue-grid-layout 来填充网格项/图块，它们都是我们系统将运行的“步骤”。我能够动态添加新的“步骤”，但是我只能通过使用 pop() 从网格项所在的数组中删除最后一项来成功删除步骤。我想放置一个

在每个步骤中，这样我就可以删除网格上的任何项目，而不仅仅是最后一个项目。

我看过一些例子，但不是最擅长 javascript - 我没有任何运气。我尝试引用此处使用的函数：https ://chrishamm.io/grid-demo/ 和 https://github.com/chrishamm/vue-dynamic-grid 用于删除网格项，但是这个库比这个库要复杂一些常规的 Vue-Grid-Layout。

这是我的代码，关键是 step.i 组件，它是填充的每个项目的 ID，每个图块的角落都有一个“x”，函数需要能够识别该图块的 ID，并删除stepGrid 数组中的相应项：

//网格数组在store.js中，如下图（这是一个电子应用程序）：

我知道我需要在这里合并使用密钥，但我不确定该怎么做。我发现了这个，但他以一种不同寻常的方式去做：

“我通过按钮删除了数组中的元素，但无法理解问题所在，因为最后一个元素总是被删除，尽管键是唯一的。我添加了一个额外的唯一 uuid，一切正常。”

最后，我浏览了 Vue-Dynamic-Grid 的文件，发现他们正在使用以下方法删除项目：

如果有人可以提供帮助，我将不胜感激！我一直在通过这个项目学习 JS，所以如果有人有一些提示，请告诉我！谢谢

我曾尝试尝试根据 Vue-Dynamic-Layout 删除项目的方法编写一个函数，但没有成功。截至目前，我在每个图块中都没有一个小“x”，我在应用程序的左下方有一个用于添加/删除步骤的按钮，要删除项目，我只是将最后一个项目弹出stepsGrid 数组，所以我只能删除最后一个填充的项目。