问题标签 [vue-props]

我有一个组件应该显示来自商店的数据，但该组件是可重用的，所以我想通过道具传递商店模块的名称和属性名称，如下所示：

然后，在组件中：

问题是，似乎道具在mapState()执行时是未定义的。如果我对 prop 值进行硬编码，则该组件可以工作。created()此外，如果我在钩子中记录道具，我会得到预期值。所以这似乎是一个竞争条件。

我在这里做错了吗？

更新

模块命名空间必须从映射函数中传递，如下所示：

（注意这get()是一个 lodash，不是 vue 函数）

这可以进一步抽象为mixin。

我在一个组件中看到了一个示例代码块，它向下传递了两个道具。一个使用“：”，而另一个不使用。但我无法弄清楚为什么一个人需要而一个人不需要。它代表什么以及它如何影响传递的信息？

并在组件内部

我目前正在编写一些练习代码，您可以通过单击显示的按钮之一来获取一些详细的卡片数据。

我实现了“显示详细的卡片信息”功能，当您通过以下代码单击橙色按钮之一时，该功能会被触发，

，但由于对象obtainedCardInfo中包含一些其他对象，所以输出的某些部分仍然是这样的 JSON 对象的形式。

我得到了一些建议，我可能需要将另一个组件作为子组件，所以我可以遍历obtainedCardInfo子组件内部，然后像这样导入子组件。

于是我开始着手制作另一个组件，但又出现了另一个问题。DetailedInfoChild.vue当我尝试将数据作为以下代码传递时，我无法将对象数据传递给我制作的组件。

我觉得它不工作的时候很奇怪，因为这应该遵循 Vue.js 官方文档中的语法。

https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object

让我感觉更奇怪的是，当我尝试传递对象的单个成员而不是下面的整个对象时，我可以传递数据。

我可能做错了什么？

这是DetailedInfoChild.vue我编写的组件的代码。

我需要将 api 应用程序密钥作为道具传递，以便动态更改它，而不是硬编码密钥。提供的代码将更详细地显示问题。

应用程序.vue：

api.js

我希望将“APP_KEY”作为道具而不是硬编码，就像作为道具从 Api.js 传递到 App.vue 的“album_name”一样。请让我知道我可以提供的任何其他信息。谢谢

在 Vuejs 应用程序中，当用户单击按钮时，我会弹出一个模式对话框。我需要将一个道具传递给这个模态组件。通常，我可以毫无困难地将道具传递给子组件。为什么这个案例不同？如果可以避免，我宁愿不在商店中存储任何数据。当模态打开时，prop collaboratorSelected 是一个空字符串，即它不注册父组件传递的新 prop 值，而是保持父组件挂载时设置的初始值。这个道具需要响应。

父组件...

子模态组件...

我有一个名为的模板Report.vue，在该模板中我还有一个data()名为 的属性dataSent:[]。在所述模板中，我调用了组件BarChart，我试图将dataSent具有更新元素的数组传递dataSent[1,2,3,4,5...]给组件（条形图），以便它可以显示图形。但是，当我将 console.log 添加到 BarChart 时，它永远不会收到更新的道具。我怀疑它以某种方式与事件有关，但由于我是新手，还没有完全理解它是如何工作的，想知道我是否可以得到一些帮助

由于 dataSent:[] 被初始化为一个空数组，因此 BarChart 组件从一开始就没有显示任何内容是有道理的，但是随后，我创建了一个方法（在方法部分），称为 updateData()，它显式用 [12, 19, 3, 5, 2,8] 填充 dataSent。当然，我正在使用绑定到绑定到dataSent数组的组件条形图（这个称为数据）的道具。最后，在 html 部分，一个@input名为 GPSelect 的组件中的事件被认为是触发更改（更新 dataSent 数组），但是，如前所述，确实发生在父级（Report.vue）中，而不是在子级中组件（条形图）。

报告.vue

this.data我希望来自 Barchart 的 console.log 显示从父组件 Report.vue 发送的更新数组（接收到的），但目前，它显示[__ob__: Observer]

我将一个值列表从父组件传递给它的子组件，并希望接收所有值，但我只收到最后一个。

这是父组件的代码：

这是子组件的代码：

这样我一个接一个地接收数据，如果我想打印例如'name'，它只显示列表中的姓氏'Eclair'，而我想在子组件中有一个包含所有名称的数组。最好的方法是什么？

我正在使用 Vue.js 组件vue-tags-input。我想以以下格式 1、2、3、4、5、6 编辑存储在数据库中的标签。

我拆分数据,并将值推送到标签数组中。

该元素在我的表单中正确填充：

但我收到以下错误：

在这种情况下如何定义道具？

问候丹尼。

我正在尝试将数组动态传递到我的组件的道具中。问题是这个数组是由 getter 获取的。原因是我从商店中获取了多个列表，并希望使用循环将它们传递下去。

Parent.vue（见行：2）

这就是我的tabItems数组和映射的 getter 的样子

问题是该值被截获为字符串文字（这是有道理的），我无法让它工作。

我尝试过替换{ list: "prodList", cardHeight: 20 },，{ list: this.prodList, cardHeight: 20 },但这无济于事。

另外，因为我的 Vuex 被拆分成多个模块，所以我不能使用提供的字符串来获取子模块内的 getter。

我将一个组件（组件 1）中的一个 prop 传递给另一个组件（组件 2），相关的方法（在组件 2 中具有传递/给定的 props 值）起作用。然后我尝试将方法放在组件 1 中并将方法中的给定值更改为内部动态证明，它停止工作。

肯定是访问方式的问题：

请帮忙！