问题标签 [vuejs3]

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 投票
5 回答
107254 浏览

javascript - 如何使用 Vue Composition API / Vue 3 观察道具变化?

虽然Vue Composition API RFC Reference 站点有很多watch模块的高级使用场景,但没有关于如何观看组件道具的示例?

Vue Composition API RFC 的主页Github 的 vuejs/composition-api 中也没有提到它。

我创建了一个Codesandbox来详细说明这个问题。

编辑:虽然我的问题和代码示例最初是使用 JavaScript,但我实际上使用的是 TypeScript。托尼汤姆的第一个答案虽然有效,但会导致类型错误。Michal Levý的回答解决了这个问题。所以我typescript后来标记了这个问题。

EDIT2<b-form-select> :这是我在from之上的这个自定义选择组件的反应性布线的抛光但准系统版本bootstrap-vue (否则不可知论实现,但这个底层组件确实会发出 @input 和 @change 事件,这取决于是否以编程方式进行更改或通过用户交互)

0 投票
3 回答
7050 浏览

typescript - 如何使用 nuxt 和 @vue/composition-api 提供/注入 Vue 根实例?

我正在尝试将@vue/apollo-composable与我的 Nuxt-Ts 应用程序一起使用。这是应该如何将其注入“普通”Vue 应用程序的根实例的示例:

问题:我不知道如何访问Nuxt-TS 中的根实例。

我尝试制作一个插件,但它被直接注入到根实例中(这是不对的,因为@vue/apollo-composable使用composition-api::provide()它会创建它自己的属性_provided

如果我使用 nuxt 插件的inject一个$get 连接。如果我_provided直接通过它写一个对象,ctx.app._provided =它就不会粘住。

我不能provide()像原来的例子那样调用,因为它只允许在VueComponent::setup函数内部。

我还尝试创建一个组件并在我需要它的页面上使用它(虽然有点违背了在根实例中安装的目的)

但是随后setup导出的组件在InstallGraphQl::setup...之前被调用

编辑:有关更多信息,@vue/apollo-composable请参见此处的讨论:https ://github.com/vuejs/vue-apollo/issues/687

0 投票
1 回答
1375 浏览

vue.js - Vue 3 中的模板渲染与渲染函数 h()

您如何看待 Vue 3(或 composition-api)中的模板渲染,尤其是它的速度和轻量级?

我们创建了一个带有简单组件的站点构造函数(例如 ui-box、ui-button 等)。在 Vue 2 中,对于其中的大多数,我们使用功能组件通过 h() 函数进行渲染,以便进行渲染更快更轻,因为我们期望在场景中有很多这样的组件。据我所知,在 Vue 3 中,模板渲染会更快并具有更好的性能。

你怎么看?当 Vue 3 到来时,我们应该仍然使用 h() 还是可以使用通常的模板渲染?

0 投票
2 回答
2108 浏览

vue.js - VueJs 从父组件获取子表单数据

我的子组件中有一个表单:

现在从我的父组件中,我有一个按钮,我需要单击该按钮来获取子表单数据。

感谢你的帮助。

0 投票
1 回答
1235 浏览

vue.js - 如何使用 @vue/composition-api 和 nuxt.js 获取 vue-apollo 实例

如何配置vue-apollo, 结合使用or@vue/apollo-composable来完善?@vue/composition-apiVue3.0

因为虽然我apolloClient通过 using获得了默认值@nuxtjs/apollo

它仍然是空的,而不是填充我的设置nuxt.config.ts

我怎样才能创建一个工作vue-apollo client使用@vue/apollo-composable或如何context.root.$apollo在第一手创建?

0 投票
2 回答
284 浏览

vue.js - 使用 Vue 和 Axios 上传多个文件

我在使用 Axios 在 Vue 中上传多个文件时遇到了一些问题。问题是 FileList 总是返回一个长度0,即使我选择了多个文件。

我有一个打开文件上传的按钮:

它调用的函数:

它所指的表单输入:

然后在handleUpload()我想axios打电话上传文件。

this.files总是返回一个FileList长度为0. 我已经file在函数中设置了数据:

0 投票
4 回答
208 浏览

javascript - Vue中双向绑定props的正确方式是什么?

这里我有两个组件:

消息.vue

样本.vue

最后,

应用程序.vue

我想做的事情是用msg组件我想改变msgApp.vue的数据中的组件。但是当我更改值时,Vue 会发出警告:

Vue 错误

所以我不明白下一步该怎么做。请帮助我。

0 投票
2 回答
930 浏览

javascript - 根据Vuejs中的时间戳对Json数据进行排序

我正在使用 api 渲染一个 Json

这给了我如下的Json数据

我在我的模板中呈现数据如下

输出如我所料。有人可以建议我吗,如何编写一个方法以便整理我的输出取决于“创建”时间戳

0 投票
2 回答
668 浏览

javascript - 渲染组件后如何关注特定的输入文本?

每次我通过使用类似这样的路由器对象推送组件来渲染组件时,我都在努力使其正常this.$router.push('/Home/mypath');工作为索引。基本上,我将索引值传递给输入文本元素的ref ,该元素位于组件的v-for循环内,所以在mounted(),我有这样的东西

但即使我传递了 1 或 2 的值,它仍然专注于第一个输入元素。当我查看控制台日志时,它会在控制台上显示此错误。 TypeError:无法读取 此行上未定义指向的属性“0”this.$refs.newInp[index].focus();

获取 v-for 中数据的示例代码

模板:

如何解决此类问题?解决方案是什么?谢谢。

0 投票
1 回答
1342 浏览

vue.js - Vue Composition API createComponent 子组件

我只是尝试使用 Vuetify 在 Nuxt/Composition API/TypeScript 项目中使用子组件。我尝试在 setup 方法之前包含组件,但是当我查看源代码时,我只看到<!---->子组件数据应该在哪里。

这是应该显示“嵌套”组件的layouts/default.vue布局。

这是要嵌套的components/ListFilter.vue组件的示例内容,其中的内容无关紧要。