嵌套 useFetch 导致 Nuxt 3 中的 Hydration 节点不匹配
在 Nuxt 3 页面内,我通过从 pinia 存储调用操作来获取帖子数据: {{ 发布数据 }} {{ 帖子内容... 在 Nuxt 3 页面内,我通过从 pinia 商店调用操作来获取帖子数据: <template> <div v-if="postData && postContent"> {{ postData }} {{ postContent }} </div> </template> <script setup> const config = useRuntimeConfig() const route = useRoute() const slug = route.params.slug const url = config.public.wpApiUrl const contentStore = useContentStore() await contentStore.fetchPostData({ url, slug }) const postData = contentStore.postData const postContent = contentStore.postContent </script> 那是我的商店: import { defineStore } from 'pinia' export const useContentStore = defineStore('content',{ state: () => ({ postData: null, postContent: null }), actions: { async fetchPostData({ url, slug }) { try { const { data: postData, error } = await useFetch(`${url}/wp/v2/posts`, { query: { slug: slug }, transform(data) { return data.map((post) => ({ id: post.id, title: post.title.rendered, content: post.content.rendered, excerpt: post.excerpt.rendered, date: post.date, slug: post.slug, })); } }) this.postData = postData.value; if (postData && postData.value && postData.value.length && postData.value[0].id) { const {data: postContent} = await useFetch(`${url}/rl/v1/get?id=${postData.value[0].id}`, { method: 'POST', }); this.postContent = postContent.value; } } catch (error) { console.error('Error fetching post data:', error) } } } }); 浏览器中的输出正常,但我在浏览器控制台中收到以下错误: entry.js:54 [Vue warn]: Hydration node mismatch: - rendered on server: <!----> - expected on client: div at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <Anonymous key="/news/hello-world()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/news/hello-world', hash: '', query: {…}, name: 'news-slug', path: '/news/hello-world', …} ... > at <RouterView name=undefined route=undefined > at <NuxtPage> at <Default ref=Ref< undefined > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at <NuxtLayout> at <App key=3 > at <NuxtRoot> 如何解决这个问题? 我尝试在 onMounted 中获取帖子数据,但在这种情况下 postData 和 postContent 保持为空 onMounted(async () => { await contentStore.fetchPostData({ url, slug }) }) 您可以使用 ClientOnly 组件来消除该警告。请参阅文档了解更多信息。 该组件仅在客户端渲染其插槽。
在 HTTPS 中运行 Visual Studio 默认 Vue 项目
我使用默认的 Vue 项目模板在 Visual Studio 2019 中创建了一个标准的 Vue 应用程序。我使用的是 Windows 10。这将创建一个可以使用 Vue CLI 启动的简单项目。这...
我正在尝试使用 Vue 以编程方式阻止 HTML 对话框元素的关闭事件关闭对话框。这是我正在使用的代码: 从“vue”导入{ref}; const 对话框模板Re...
在Vite-Vue应用程序中,我实现了index.html和vue组件/视图的样式,但浏览器将它们显示为被划掉。 AMany =我在组件/视图中添加的样式也是 cro...
我有一个 Google Big Query 项目,其中需要我删除 a 列中的重复项。有效的方法是什么?我是 Google Big Query 的新用户?
我将以此作为序言,我是 Excel Power Query 的新手,昨晚刚刚了解它,并制作了包含要合并的 csv 文件的源文件夹(总共 5 个 - 2020、2021、2022、2023、2024 (Cu. ..
vue-router useRouter 在构建库组件时不起作用
我正在构建一个 Vue3 npm 组件库,希望我可以使用 vue-router 的 useRouter 访问当前路由器,并且它将由导入我的任何 vue 应用程序自动提供
Vue 2.0 + webpack 使用 npm 包中的组件
我正在尝试使用 webpack 和 Vue 2.0 设置一个项目,但在我的项目中使用 npm 包(如 vue-parallax)中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...
Quasar Vue Router 解析名为route的href
我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路: ”/”, 组件:() => import("layouts/MainLayout.vue")...
我正在用 React 构建一个在线商店,并决定在该项目中使用 React Query。任务是在缓存中显示和存储产品。从这些产品中,我需要获取所需的一个...
参数类型 {query: () => "products"} 不可分配给参数类型
我有此错误,并且仅在 WebStorm 中出现。在VS代码中就可以了。 我需要更改一些配置还是我在某个地方犯了错误? 参数类型 {query: () => "products"} 不是
我在 Power Query 中有一个表,我正在尝试重新排列。原始表如下所示: 我想重新排列它看起来像: 我将不胜感激任何帮助解决这个问题的帮助。谢谢...
我有一个带有react-query的next.js项目。基本上我需要做的是在主页上显示 API 中的所有国家/地区,但还有一个按名称搜索的输入,以及一个选择搜索...
如何正确使用 Function.InvokeAfter 来延迟 Excel 中整个查询的 Power Query 处理
我试图将 Excel 中的 Power Query 运行延迟大约 25 秒(我们称之为查询 2)。这是为了允许另一个查询(查询 1)首先从外部源提取数据。查询 2 o...
在 build/dev ("dev": "vue-cli-service build --dest=../static/ --mode=development --watch") 命令生成后,我使用 Vue 和 Vuetify 构建我的应用程序文件转到静态目录
Vue 3 - 如何使用 typescript 将组件包装在 Vue 中
我正在尝试包装 PrimeVue 组件(日历),稍微更改其样式,然后再次导出。 反应中类似以下内容: const WrappedCalendar: React.FC = (...
Excel Power Query 将列格式更改为自定义数字格式
我在 Power Query 编辑器中有一个包含多个应用步骤的查询。我有一列文本,我需要将其更改为以下格式的数字:000.000 我可以在 Excel 中手动执行此操作,但
JQL 中没有正则表达式: https://answers.atlassian.com/questions/138055/how-can-i-use-regex-in-a-jql-query-i-cannot-match-strings-that-have-a-specific-ending- in-jql-ex-ing-should-match-running-jo...
我使用 Vue router 4 创建了一个新的 Vue 3 应用程序。 当我通过 访问链接时,它会打开页面,但是当我直接打开链接时,它会显示未找到错误。 { 不是芙...
=SORT(UNIQUE({QUERY(LAMBDA(z,filter(z,index(z,,12))=max(index(z,,12))))(IMPORTRANGE("1madkVso_zaoU9MH2gvtVlTaT2iJ9nMcCxS8ux0Vpz14", "概述!A2 :Z")),"选择 Col1,Col2,Col3,...
升级我的项目后,每次尝试在计算变量中使用 VueI18n.t() 时,我都会收到此警告: [Vue warn]:在计算的 getter 内部调用 getCurrentInstance()。这是inco...
Vue.js 完全新手。 我正在关注 Kirby CMS 团队制作的教程。 Vue 正在使用 Vite@4.5.3 进行构建,作为 KirbyUp 捆绑器的一部分。 所以,我可以在
如何使用Websocket从FastAPI(后端)返回JSON到Vue(前端)?
我有一个应用程序,前端是用Vue实现的,后端使用FastAPI框架。通信是通过websocket实现的。 目前,前端允许用户
我按如下方式设置代码,并且能够从 SomeComponent.vue 中的 setter 更新 App.vue 中的 checkout_info,但 SomeComponent.vue 中的 getter 不是响应式的。 // 应用程序.vue 导出默认值 {...
react中firestore onSnapshot的返回值
我在函数中有一个 onSnapshot 查询: //firebaseutil.js 导出异步函数 getShorts(uid) { const q = query(collection(db, 'shorted'), where('owner', '==', uid)); 常量取消订阅 = onSnapsh...
我正在从 Vue router Doc 学习相对重定向。 我正在尝试实现代码的文档示例。 常量路由 = [ { // 始终将 /users/123/posts 重定向到 /users/123/prof...
我有以下代码: 导出默认类自定义扩展 Vue { 安装(){ console.log(this.$el); ...
“拒绝应用 {link} 中的样式,因为其 MIME 类型不受支持且启用了严格的 MIME 检查。”在 Vue+Vuetify 应用程序中
我使用 vue-create-app 创建了一个 Vue+Vuetify 项目。在我的本地系统中,Vuetify 工作正常,但在 Gitlab 实时服务器上不起作用。并在实时应用程序中显示此错误消息: “拒绝应用...
我试图在 Vue 3 中按名称渲染对象列表,但我不断收到“无法读取未定义的属性(读取“名称”)”错误。 我对 Vue 还是新手,我不知道......
Vue 3,组合 API:“排除”TypeScript 实用程序类型导致道具验证错误
我正在使用 Vue 3 以及 Composition API 和 TypeScript,一切都是最新的稳定版本。 假设我有以下类型: 导出接口人{ 名称:字符串; } 导出类型统计...
我正在使用 vue-i18n 来本地化我的表单。我有一个电子邮件字段,其中有一个占位符,其中包含一个包含 @ 符号的示例电子邮件地址。 emailPlaceholder:'例如:test@example.com'
Laravel 和 Vue Js 应用程序中的脚本无法使用响应正文(原因:CORS 缺少允许来源)
开发 Laravel 10 + Vue Js 3 应用程序两个项目文件是分开的。我也有以下 api.php 登录路线 路线::post('/login', [LoginController::class, '提交']); 并使用
为什么从其他文件导入的 SCSS 变量在 Vue 3 中不起作用?
我在我的vue 3项目中安装了sass loader,但问题是我想从另一个文件导入变量,但不起作用 我的架构是: 源代码 资产 CSS 样式.scss
我正在使用 Vue 3、Vuetify 3 和 Pinia 开发一个应用程序,所有这些我都在学习过程中。我正在尝试按照这个视频来学习 Pinia,大约 17:50,演示者说要安装...
为了使用动态定义的单页面组件,我们使用组件标签,因此: ... 从 '@/
如何在 Vercel 中使用 Vue 前端部署 Express 应用程序?
我将 Vue 应用程序构建到名为 dist 的文件夹中。 我有用 Node Express 编写的后端 API。 当我在 Vercel 上部署它时,出现 404 错误。 这是我的应用程序结构和 Vercel 设置...
我创建了我的 Vue-Vite 应用程序。然后我在 dev.azure - Web App 上创建了存储库。接下来我将其部署在portal.azure.com 上。修复了一些错误后,我仍然不知道如何修复此错误: 主要....
我正在使用vue js可拖动插件 它对于单个列表工作得很好,但我需要使用多个列表(比如 Jira board)。我想将一张卡片(元素)从一个列表移动到另一个列表,但是它
如何为我的多组件 Vue 3/Vuetify 3 应用程序中的每个组件提供一个常量?
我有一个用 Vue 3 和 Vuetify 3 编写的应用程序。它有多个组件,所有组件都显示货币金额。我希望货币金额以适合的格式显示...
我的此查询在不到 100 个日期内正常运行。 声明@startDate DATETIME 声明 @endDate DATETIME 将 @cols 声明为 NVARCHAR(max) 将 @query 声明为 NVARCHAR(max) 声明@startDa...
apache beam 和 Big Query TableSchema 中的序列化问题
并感谢您的支持。 我目前正在尝试使用 Apache Beam,以尽可能多地了解它的工作原理。我面临 com.google.api.serv 序列化的问题...
如何在 Google Sheets 中使用 SQL 进行表查找
这是我的数据(批号和日期的组合始终是唯一的): 所需结果: 我用过这个: =QUERY(Production!A:G, "SELECT A,B, C, D, G WHERE A is NOT NULL label C 'NEW LOT NO.',...
如何在 vue javascript 应用程序中显示服务器目录中的所有图像
我正在尝试将主机(服务器)上的一个目录(图表)中存在的所有图像显示到 vue 页面中,而不必手动将它们全部列出在数据中,因此必须重建...
我是 Excel Power 查询 (M) 的新手,希望得到一些帮助。我有一个结构如下的表。我想填写一个名为“每日工资”的列,即=“3 个月工资...
我知道如何以 HTML 格式输出 x-query 结果,请参阅例如XQuery 到 HTML 表:生成列 但我在互联网上找不到在降价表中输出的单个示例。 (Xquery 版本...
如何将数据从 Google Big Query 导出到 PostgreSQL
我有一个表存储在 BigQuery 中,我想在 PostgreSQL 数据库中创建该表+数据的副本。这个 PostgreSQL 位于 Google Cloud SQL 中。 此导出每天都会发生,即
我想从如下查询的表中查找手机号码的数量: 选择姓名,计数(手机号码)作为计数表中的计数,其中计数<=5 This query throws an error. How can I resolve this?
如何使用createQueryBuilder添加另一列来计算值?
当我查询用户的详细信息以计算连接到每个用户的设备时,此代码可以正常工作。 $em = $this->getEntityManager(); $query = '选择 u.id, u.email, COALESCE(c, 0) d...
从数据库返回 Json 而不使用 @Table(tableName) @Entity 等的代码应该是什么样的? 例如,该 CustomResponse 未映射到数据库表,但通过该选择我想要 得到
有没有办法让我的 WordPress 网站指向 diste/templates 目录中的 index.html 而不是正常的 WordPress 行为?
我正在使用 Vue.js 开发一个无头 WordPress 网站,并且我有一个名为 vue-wordpress 的自定义主题。该主题是使用 Vue CLI 搭建的。这是目录结构 - 距离 资产 模板