问题标签 [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 投票
2 回答
24 浏览

vue.js - 我可以将道具传递给子组件并在Vue中使用父组件中的数据吗

我想将数据传递给子组件并在父组件中呈现相同的数据。此外,我想在函数中使用数据,而不是简单地将其呈现在子进程中。当我在这个例子中传递道具时,它不再呈现

带有数据的标签

0 投票
2 回答
977 浏览

javascript - Vuejs如何从url或router-link输入时阻止路由参数类型改变

路由参数更改类型

  • 当我从url输入时到String

  • router-link传递到Number

路由器.js

当我使用“路由器链接”时,它会将道具作为“数字”类型传递

如果我单击router-link中的元素,它将重定向到另一个页面,并且“params.id”是Number类型。

但是当我像这样在 Url 上输入它时:

params 道具变成字符串

如何阻止 params 道具类型不断变化?

0 投票
1 回答
5719 浏览

vuejs2 - 使用 Nuxt.js 将事件传递给父组件

我有一个简单的标题组件,其中包含一个可点击的汉堡包,我想将汉堡包分成一个单独的组件,但是当我这样做时点击事件不再起作用,我想我需要某种布尔道具但找不到解释或我正在寻找错误的东西。

这作为单个组件工作

/components/Header.vue

当分成两个组件时,下面的内容不起作用,因为我被卡住了。

/components/Header.vue

/components/汉堡包.vue

0 投票
1 回答
578 浏览

ajax - 如何在 mount() 和 created() 钩子中从 AJAX 调用中获取 Vue 道具和数据

我只是想将使用内置fetch()方法从 AJAX 调用中获取的数据设置到我的 Vue 组件的数据变量courts中(我正在使用 Vue2)。

我知道当你进入fetch()方法时,关键字的上下文this可能会改变。但是,如果我将变量courts作为道具绑定到我的子组件,它会呈现到 HTML中,但我仍然无法从例如created()mounted()生命周期钩子访问道具。

我已经阅读了这个问题,它指出了关于关键字的问题this

由于 JavaScript 的异步工作流程,我还检查是否使用setTimeout()我做的方法获取数据,但不是在我的子组件中作为道具。

我从 Webpack 加载了 Babel,我试图用一个async await函数对其进行排序,但没有运气。

App.vue(父组件)

我也this.$props.items用来访问我的道具,但它给了我一个空数组。

CourtMap.vue(子组件)

编辑:对不起,我忘了this在变量的索引中使用。

Index.js(我开始我的 Vue 应用程序的地方)

我想这是新手必须经历的事情,但出于这个原因,我想知道每次我想访问 Vue 中获取的数据时我必须遵循哪种模式。我现在不知道如何进行。

预先感谢您花时间阅读本文。

0 投票
2 回答
9147 浏览

javascript - Vue 子组件不会在道具更改时更新

我正在更新发送到 Vue 中的“锻炼”组件的“锻炼”道具。在子组件中,我发出一个函数来增加你所在的集合。该函数在父组件中触发(我得到了 console.logs()),但子组件没有重新渲染。

家长:

方法:

子模板

这是 Github 上的项目

还有现场演示

帮助表示赞赏

0 投票
1 回答
1299 浏览

vue.js - 为什么 Vue3 路由器不通过参数传递道具?

我想将一个值作为 Vue3 中的道具传递给视图。这种方法在 Vue2 项目中效果很好,但在 Vue3 中却不行

路由器:

查看 1(来自)

视图 2(到)

每次navigateTo()调用时,View2 中的 'id' 都是未定义的

我错过了什么,因为这在 vue2 项目中运行良好。

最好的

0 投票
2 回答
395 浏览

vue.js - 如何在 vuejs 中为表格的不同元素以不同方式显示子组件中的数据?

我想在 vuejs 中的表格中显示每个元素的不同数据

我使用了道具,并且能够显示通过 b-table 标签创建的表的数据。但是我无法为表中的每个元素以不同的方式显示数据。一些代码对我来说可能很容易让你理解我的问题

对于 b 表,我使用 item 字段显示数据,该字段在下面声明为 prop 并且来自父级。但在下面,我无法显示 b 卡内的数据。

0 投票
2 回答
465 浏览

vue.js - 如何在 Vue.JS 应用程序中使用模拟

我正在开发一个带有 Vue.JS 前端的应用程序,用户登录并被发送到其他用户列表。同样在此页面上,还有一个用于医院列表的选项卡(单击后,它将带您进入包含医院列表的新页面)。

登录用户在用户页面上可以执行的一种方法是选择要模拟的用户之一。一旦他们确认要模拟此用户,用户页面就会刷新以显示模拟用户有权查看的用户列表网格。在模拟时,他们还应该能够在选项卡(用户到医院)之间切换,继续模拟,所以现在医院列表将呈现被模拟用户有权查看的医院列表。为了确认用户正在被模拟,页面上应该有一个文本框显示“{User} 现在被模拟了”。

我可以做第 1 部分,在用户页面上模拟用户,但是一旦我单击医院,存储为“isUserImpersonated”的数据就会刷新(一旦创建模拟,isUserImpersonated 从 false 切换为 true。当我刷新页面,isUserImpersonated 将切换回 false)。如何让每个页面的数据保持不变,而不是在呈现新路径后刷新(localhost:8080/users -> localhost:8080/hospitals?

我在查看文档后尝试使用 EventBus,这似乎有效,但是一旦您呈现新页面,数据将不会保持不变。

有人在 Vue.JS 项目中使用过模拟吗?如果用户在页面之间切换,您对我可以做些什么来确保“isUserImpersonated”保持不变有任何提示或想法吗?

0 投票
1 回答
842 浏览

javascript - 将数据传递给模态:Property/method props undefined & TypeError: Cannot read property product of undefined

我有一个产品列表,每个列表都包含一些信息和一个按钮。单击该按钮(更多详细信息按钮)会打开一个模式窗口,其中包含该特定产品的(我使用道具将数据从父级传递给子级)更多信息。我有一个根组件(父组件:App.vue),在它下面我有一个产品列表组件(子组件:Product_listing.vue)和一个模式窗口组件(孙子组件:Modal_window.vue)。我想孩子和孙子也有亲子关系,因此我在这里使用了道具。我不断收到这些错误:

  1. Property or method "props" is not defined on the instance but referenced during render.
  2. [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'product' of undefined.
  3. TypeError: Cannot read property 'product' of undefined.

这就是我到目前为止所拥有的,我一直在这里关注这个例子:https ://jsfiddle.net/5tgq4dof/1/

父组件(Product_listing.vue)

子组件(Modal_window.vue)

0 投票
1 回答
425 浏览

javascript - 使用 API 使用 Vue.js 获取数据时没有响应或错误

我刚开始学习 vue.js,需要一些帮助。输入问题时,我正在尝试使用 API 从外部源获取答案。但我没有得到任何响应,控制台中也没有错误。我确定错误可能是什么。

这是我的代码的链接https://codesandbox.io/embed/vue-template-dk71y