问题标签 [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.
javascript - 通过道具传递状态属性(Vuex)
我有一个组件应该显示来自商店的数据,但该组件是可重用的,所以我想通过道具传递商店模块的名称和属性名称,如下所示:
然后,在组件中:
问题是,似乎道具在mapState()
执行时是未定义的。如果我对 prop 值进行硬编码,则该组件可以工作。created()
此外,如果我在钩子中记录道具,我会得到预期值。所以这似乎是一个竞争条件。
我在这里做错了吗?
更新
模块命名空间必须从映射函数中传递,如下所示:
(注意这get()
是一个 lodash,不是 vue 函数)
这可以进一步抽象为mixin。
vue.js - 何时在传递给 Vue 组件的属性上使用“:”?
我在一个组件中看到了一个示例代码块,它向下传递了两个道具。一个使用“:”,而另一个不使用。但我无法弄清楚为什么一个人需要而一个人不需要。它代表什么以及它如何影响传递的信息?
并在组件内部
vue.js - 通过 props 传递整个对象在 Vue.js 中不起作用,同时传递单个成员有效
我目前正在编写一些练习代码,您可以通过单击显示的按钮之一来获取一些详细的卡片数据。
我实现了“显示详细的卡片信息”功能,当您通过以下代码单击橙色按钮之一时,该功能会被触发,
,但由于对象obtainedCardInfo
中包含一些其他对象,所以输出的某些部分仍然是这样的 JSON 对象的形式。
我得到了一些建议,我可能需要将另一个组件作为子组件,所以我可以遍历obtainedCardInfo
子组件内部,然后像这样导入子组件。
于是我开始着手制作另一个组件,但又出现了另一个问题。DetailedInfoChild.vue
当我尝试将数据作为以下代码传递时,我无法将对象数据传递给我制作的组件。
我觉得它不工作的时候很奇怪,因为这应该遵循 Vue.js 官方文档中的语法。
https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object
让我感觉更奇怪的是,当我尝试传递对象的单个成员而不是下面的整个对象时,我可以传递数据。
我可能做错了什么?
这是DetailedInfoChild.vue
我编写的组件的代码。
javascript - 如何在 Vue 中将 API 应用程序密钥作为道具传递
我需要将 api 应用程序密钥作为道具传递,以便动态更改它,而不是硬编码密钥。提供的代码将更详细地显示问题。
应用程序.vue:
api.js
我希望将“APP_KEY”作为道具而不是硬编码,就像作为道具从 Api.js 传递到 App.vue 的“album_name”一样。请让我知道我可以提供的任何其他信息。谢谢
vue.js - 如何将道具传递到 vuejs 中的模态对话框中?
在 Vuejs 应用程序中,当用户单击按钮时,我会弹出一个模式对话框。我需要将一个道具传递给这个模态组件。通常,我可以毫无困难地将道具传递给子组件。为什么这个案例不同?如果可以避免,我宁愿不在商店中存储任何数据。当模态打开时,prop collaboratorSelected 是一个空字符串,即它不注册父组件传递的新 prop 值,而是保持父组件挂载时设置的初始值。这个道具需要响应。
父组件...
子模态组件...
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]
arrays - 将数组传递给Vuejs中的道具
我将一个值列表从父组件传递给它的子组件,并希望接收所有值,但我只收到最后一个。
这是父组件的代码:
这是子组件的代码:
这样我一个接一个地接收数据,如果我想打印例如'name',它只显示列表中的姓氏'Eclair',而我想在子组件中有一个包含所有名称的数组。最好的方法是什么?
javascript - 无效的道具:道具“标签”的自定义验证器检查失败
我正在使用 Vue.js 组件vue-tags-input
。我想以以下格式 1、2、3、4、5、6 编辑存储在数据库中的标签。
我拆分数据,
并将值推送到标签数组中。
该元素在我的表单中正确填充:
但我收到以下错误:
在这种情况下如何定义道具?
问候丹尼。
vue.js - 如何“动态地”将 veux getter 作为道具传递给我的子组件?
我正在尝试将数组动态传递到我的组件的道具中。问题是这个数组是由 getter 获取的。原因是我从商店中获取了多个列表,并希望使用循环将它们传递下去。
Parent.vue
(见行:2)
这就是我的tabItems
数组和映射的 getter 的样子
问题是该值被截获为字符串文字(这是有道理的),我无法让它工作。
我尝试过替换{ list: "prodList", cardHeight: 20 },
,{ list: this.prodList, cardHeight: 20 },
但这无济于事。
另外,因为我的 Vuex 被拆分成多个模块,所以我不能使用提供的字符串来获取子模块内的 getter。
javascript - Vue js——通过方法访问props失败
我将一个组件(组件 1)中的一个 prop 传递给另一个组件(组件 2),相关的方法(在组件 2 中具有传递/给定的 props 值)起作用。然后我尝试将方法放在组件 1 中并将方法中的给定值更改为内部动态证明,它停止工作。
肯定是访问方式的问题:
请帮忙!