问题标签 [vue-props]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2983 浏览

javascript - 通过道具传递状态属性(Vuex)

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

然后,在组件中:

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

我在这里做错了吗?

更新

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

(注意这get()是一个 lodash,不是 vue 函数)

这可以进一步抽象为mixin。

0 投票
1 回答
45 浏览

vue.js - 何时在传递给 Vue 组件的属性上使用“:”?

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

并在组件内部

0 投票
1 回答
3225 浏览

vue.js - 通过 props 传递整个对象在 Vue.js 中不起作用,同时传递单个成员有效

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

before_expanding

after_expanding

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

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

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

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

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

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

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

我可能做错了什么?

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

0 投票
1 回答
812 浏览

javascript - 如何在 Vue 中将 API 应用程序密钥作为道具传递

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

应用程序.vue:

api.js

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

0 投票
1 回答
2140 浏览

vue.js - 如何将道具传递到 vuejs 中的模态对话框中?

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

父组件...

子模态组件...

0 投票
1 回答
118 浏览

vue.js - 在父组件中更新数据后,子组件未从父组件接收道具

我有一个名为的模板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]

0 投票
1 回答
18854 浏览

arrays - 将数组传递给Vuejs中的道具

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

这是父组件的代码:

这是子组件的代码:

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

0 投票
3 回答
2123 浏览

javascript - 无效的道具:道具“标签”的自定义验证器检查失败

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

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

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

但我收到以下错误:

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

问候丹尼。

0 投票
1 回答
801 浏览

vue.js - 如何“动态地”将 veux getter 作为道具传递给我的子组件?

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

Parent.vue(见行:2)

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

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

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

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

0 投票
1 回答
38 浏览

javascript - Vue js——通过方法访问props失败

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

肯定是访问方式的问题:

请帮忙!