问题标签 [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 回答
147 浏览

vuejs2 - 如何将道具传递给在VueJS中以v-for呈现的子组件

我有以下 Vue 组件

对象在哪里site

该组件的渲染函数如下所示:

如您所见,我想hostnamesiteprop 传递到DimensionedImage组件中,但 Vue 一直告诉我这this是未定义的。

有人可以告诉我这里的幕后发生了什么,为什么this会失去它的背景?然后我如何才能真正修复代码以便我可以传递hostnamethis.site子组件中?

0 投票
1 回答
59 浏览

vue.js - Vue.js 道具未定义

执行此代码时,将输出“未定义”。


子组件

父组件

在 Vue Devtools 上,子组件中有 $attars "idx: 5"。
我能怎么做?

0 投票
2 回答
672 浏览

javascript - 如何将对象的属性作为道具传递给 vue.js 组件

给定以下组件:

我想使用blueprintprop 来使用一些默认值填充数据字段,这些默认值也可以在使用组件时定义。

但是我怎样才能只通过一个 prop 字段blueprint呢?当我这样做时:

当然,otherAttribute默认的blueprint将消失。

我可以只设置 prop 的一个字段并将其与另一个字段的默认值合并,如下所示:

可悲的是,道blueprint具有太多字段无法单独传递每个字段。

0 投票
2 回答
91 浏览

javascript - 组件不处理空道具

我有一个组件data.table.vue和其他组件,例如abc.vuexyz.vue

在这个 data.table.vue 中,根据它接收到的道具来渲染一个段落。但是,并不是我的组件abc.vuexyz.vue都会发送道具。只有abc.vue需要发送道具。例如:

在 abc.vue 中:

在 xyz.vue 中没有道具

在 data.table.vue 中

但是我希望始终为xyz组件显示此段落.. 并且仅针对abc.vue,我希望此段落根据道具 isShown 呈现。但是,即使在xyz.vue中,它的渲染也取决于发送的道具在abc.vue中..

请帮忙 ..

0 投票
0 回答
357 浏览

javascript - 传递给子组件的道具在 Nuxt 中返回为未定义

我在表单中有一个子组件,该组件将对象作为父组件的道具。该对象用于存储用户通过输入输入的数据,并在用户键入时发出。现在老实说,我还不能 100% 确定发射是否有效。这是因为当我将对象的属性附加到输入元素内的 v-model 时,Nuxt 显示错误消息

Cannot read property 'insert property here' of undefined

令我困惑的是,如果我查看 Vue 开发工具内部,就会清楚地显示收到了 prop。当我单击子组件时,我可以查看它的所有属性,但是当我尝试引用它时,我得到了一个错误。

这是我将数据从父文件传递给子组件的方式。

这是javascript

最后是<NewProjectItteration />单个文件组件。

和它的 javascript

我的一部分感觉它与 Vue 的生活方式挂钩有关,而我正在错误地使用它们。无论如何,我想问这个问题,以防其他人遇到与我相同的问题并想阅读详细的回复。

0 投票
0 回答
51 浏览

javascript - [Vue][Vue-Router] 在多个组件中使用props

我正在玩 vue、vue-router 和 props,但现在我不确定我是否以正确的方式去做。

我有一个像这样的入口组件,一个入口组件应该链接到类似 entryDetails/:id 的东西:

入口.vue

还有一个包含条目列表的组件:

entryList.vue

现在,当我单击一个条目时,我想转到 entryDetails/:id 以显示道具中的所有信息。像这样的东西:

entryDetails.vue

这是应该做的方式吗?如果是这样,单击条目后如何从 entryDetails.vue 中的道具中获取数据?

编辑:有一个回复(已删除)说这很容易使用 vuex,否则应该使用参数来完成。Vuex 对我来说是一个选择..但我现在不喜欢使用它。

0 投票
2 回答
496 浏览

vue.js - 即使 prop 数据发生变化,Vue 组件也不显示更新的数据

这是我的父组件abc.vue

现在这是我的子组件DetailsTable.vue

现在在开始时 newRowData 包含调用 updateclient 方法之前的 rowData 的值。一旦从 ag 网格表中更新了值,就会调用更新客户端函数,然后更改名称。现在,子组件中的 newRowData 显示了更新后的名称,即 cat,但这在表中没有更新。该表仍显示“abc”。在我下次单击 ag 网格单元格后,它会显示更新的值。有没有办法在不再次单击单元格的情况下显示更新的值我应该如何实现上述反应。

0 投票
1 回答
34 浏览

vue.js - Vue.js 超链接基于道具数据而改变

我的 Vue 项目的主页有多个 Bootstrap 卡,每个卡都需要一个超链接按钮,该按钮与其余的共享相同的基本 URL。URL 的结尾需要是卡片从中获取信息的道具的“名称”属性值。例如:

第一张卡片 - URL = " https://coinmarketcap.com/currencies " + "/bitcoin"

“比特币”应该来自 propName.name。

第二张卡片 - URL = " https://coinmarketcap.com/currencies " + "/litecoin"

“莱特币”应该来自 propName.name。

等等....

我尝试了以下方法:

  1. 使用 data() 返回具有基本 URL 值的“baseURL”,将“baseURL”设置为 href 值,然后将 {{propName.name}} 附加到末尾。

  2. 使用使用“onclick="window.location.href=... + {{propName.name}}" 的输入标签制作链接按钮

无论我尝试将“+ {{propName.name}}”修改为 URL,应用程序都无法编译,或者我收到一条错误消息,指出我不能使用“+”。

我能做些什么?

谢谢。

0 投票
2 回答
1288 浏览

javascript - Vue.js 将变量从父组件传递给子组件

父组件:ShowComment

子组件:EditComment

我正在尝试将 的值传递this.CommentRecID给子组件。

我在模板中写了这个ShowComment

但 的值this.CommentRecID在子组件中显示为未定义:

在此处输入图像描述

我认为props: ["CommentRecID"],在子组件中编写已经足以传递数据,但事实并非如此(因为我认为它与 jQuery 有关)。

我尝试传递值的方式有什么问题?

这是父组件

这是子组件

0 投票
1 回答
57 浏览

json - Vuejs从本地json获取数据

我在本地文件中获取了一些 json 数据,该文件是 .txt 文件,并且无法直接访问数据,因此我只是将文件格式更改为 .json,之后,我尝试使用下面的代码循环获取干净的数据。

我通过在此组件中计算来获取数据,但我想将此干净数据设置为子组件的道具。

我想用干净的数据创建许多子组件。

非常感谢您!

代码: