vue.js 相关问题

vue3) Google Login Api (GSI) 的重定向模式找不到 http://localhost:3000

我想调整google登录api(GSI)重定向模式。如果 api 复杂，则将 url 重定向到“http://localhost:3000/oauth”，将凭证令牌发布到后端并重定向到“http://

如何在移动视图上隐藏或禁用 vuetify 3 <v-data-table> 的“排序依据”输入和标签

我正在使用 vuetify 显示一些数据： 手机查看： 代码： 我正在使用 vuetify <v-data-table> 显示一些数据： 手机查看： 代码： <v-data-table-server :items-per-page="itemsPerPage" :headers="headers" :items="serverItems" :items-length="totalItems" :loading="loading" :search="search" item-value="id" fixed-header no-data-text="Sin datos" @update:options="loadItems" items-per-page-text="autos por página" loading-text="obteniendo datos..." > 专栏： headers: [ { title: 'Patente', key: 'patente', sortable: false }, { title: 'Marca', key: 'marca', sortable: false }, { title: 'Modelo', key: 'modelo', sortable: false }, { title: 'Precio', key: 'precio', sortable: false }, { title: 'Caja', key: 'caja', sortable: false }, { title: 'Combustible', key: 'combustible', sortable: false }, { title: 'Pasajeros', key: 'pasajeros', sortable: false }, { title: 'Descripcion', key: 'descripcion', sortable: false }, { title: 'Foto', key: 'fotos', sortable: false }, { title: 'Opciones', key: 'options', sortable: false } ] 我尝试将列属性 sortable 设置为 false 但没有帮助。 除了CSS解决方案之外，还没有找到任何方法。 .v-data-table-headers--mobile { display: none; } 或者，如果您不希望表格在移动设备上响应，您可以执行以下操作： <v-data-table-server ... mobile-breakpoint="0">

如何在移动视图上隐藏或禁用 vuetify 3 <v-data-table> 的“排序依据”输入和标签

显示过滤器的移动视图 我正在使用 vuetify 显示一些数据： 显示过滤器的移动视图 我正在使用 vuetify 来显示一些数据： <v-data-table-server :items-per-page="itemsPerPage" :headers="headers" :items="serverItems" :items-length="totalItems" :loading="loading" :search="search" item-value="id" fixed-header no-data-text="Sin datos" @update:options="loadItems" items-per-page-text="autos por página" loading-text="obteniendo datos..." > 栏目： headers: [ { title: 'Patente', key: 'patente', sortable: false }, { title: 'Marca', key: 'marca', sortable: false }, { title: 'Modelo', key: 'modelo', sortable: false }, { title: 'Precio', key: 'precio', sortable: false }, { title: 'Caja', key: 'caja', sortable: false }, { title: 'Combustible', key: 'combustible', sortable: false }, { title: 'Pasajeros', key: 'pasajeros', sortable: false }, { title: 'Descripcion', key: 'descripcion', sortable: false }, { title: 'Foto', key: 'fotos', sortable: false }, { title: 'Opciones', key: 'options', sortable: false } ], 我尝试将列属性“sortable”设置为 false 除了CSS解决方案之外，还没有找到任何方法。 .v-data-table-headers--mobile { display: none; }

如何将自定义函数绑定到 vuetify Stepper 的上一个和下一个按钮

我正在尝试在 vuetify 中设置登录过程，其中第一步，输入您的电子邮件地址，第二步，输入密码，第三步，输入第二步的 TOTP 信息 -因素...

自定义占位符元素未识别为可访问性占位符

我有一个带有普通输入字段和占位符的表单，并且它们不会被灯塔测试标记为可访问性。 此表单中还有一个使用自定义范围的多选组件

Nuxt vue 基于参数/类型的显示组件

我对 Nuxt 和 Vuejs 相当陌生。我已经被困在这个问题上几天了，并且已经在谷歌上搜索了解决方案，但还没有找到任何.. 我有一个带有组件的页面 我对 Nuxt 和 Vuejs 相当陌生。我已经被这个问题困扰了几天了，已经在谷歌上搜索了解决方案，但还没有找到任何.. 我有一个带有组件<VTextField></VTextField>和<VSwitch></VSwitch>的页面，页面的示例代码如下 <script setup lang="ts"> import { ref } from 'vue'; </script> <template> <VTextField></VTextField> <VSwitch></VSwitch> </template> 但是，我没有直接使用组件，而是需要遵循一个要求，即我有一个 API 可以为我提供“类型”，并根据“类型”值显示组件。 我尝试为此创建一个函数，代码如下。 utils/RenderComponent.ts import { defineComponent } from 'vue'; import { VTextField } from 'vuetify/components'; import { VSwitch } from 'vuetify/components'; export function renderComponent(type: any) { switch (type) { case 'Text': return defineComponent({ components: { VTextField }, template: '<VTextField/>' }); case 'switch': return defineComponent({ components: { VSwitch }, template: '<VSwitch/>' }); default: throw new Error('Invalid component type'); } } 页面.vue <script setup lang="ts"> import { ref } from 'vue'; import { renderComponent } from '~/utils/RenderComponent'; </script> <template> <component :is="renderComponent('Text')" /> <component :is="renderComponent('Switch')" /> </template> 但是代码不起作用。我希望有人能提供帮助并提前谢谢您！ 您可以直接在模板中使用条件 <script setup lang="ts"> import { ref } from 'vue'; const componentType = ref('switch') </script> <template> <VTextField v-if="componentType === 'switch"></VTextField> <VSwitch v-else-if="componentType === 'textfield'"></VSwitch> .... </template>

如何将 pdfjs 与 vue3 和 vite 一起使用？

我正在尝试使用 Vite 将我的 vue2 应用程序转换为 vue3。因为没有 webpack，所以我的 pdfjs 实现失败了。我能够渲染 pdf，但 renderTextLayer 无法正常工作（参见图片贝尔...

Vue 内容在父组件之外渲染

当我在 @foreach 标签内加载 vue 组件时，它首先在其父组件之外渲染。 //看法 当我在 @foreach 标签内加载 vue 组件时，它首先在其父组件之外渲染。 //view <div class="contenido" style="padding-top:5%"> <table class="table"> <thead class="thead-dark"> <tr> <th class="col-md-8">Nombre descripción general</th> <th class="col-md-2">Actualizar</th> <th class="col-md-2">Consultar</th> </tr> </thead> <tbody> @foreach($descs as $desc) <tab-descgen desc-nombre = "{{ $desc -> nombre }}" desc-id = "{{ $desc -> id }}"></tab-descgen> @endforeach </tbody> </table> //vue component <template> <tr > <td>{{ this.descNombre }}</td> <td><i style="font-size:30px;" class="fa fa-edit float-center"></i> </td> <td><i style="font-size:30px;" class="fa fa-arrow-circle-right float-center"></i></td> </tr> </template> <script> export default { props:['descNombre', 'descId'], 渲染时，vue 组件内的表格行将渲染在标题上方，我不太明白为什么。我想知道我是否遗漏了什么。 即使忽略所有服务器端的东西，这也行不通： <tbody> <tab-descgen></tab-descgen> </tbody> 在单文件组件中它会很好，但如果这个标记进入浏览器（就像你的情况一样），它会在 Vue 接近它之前将 tab-descgen 从表格中删除。 您需要使用 is 来解决这个问题： <tbody> <tr is="tab-descgen"></tr> </tbody> 文档中对此进行了解释： https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats 简而言之，只有 tr 元素可以作为 tbody 的直接子元素，其他任何元素都会被删除。解决方法是使用 tr，然后使用 is 让 Vue 知道你真正想要什么。 Vue3 自 Vue v3.4.0 Slam Dunk 起，我们进行了重大更改 v-is 指令已被删除。它在 3.3 中已被弃用。请使用带有 vue: 前缀的 is 属性。 有关 :is 的更多详细信息，可在此处获取。 但是 TLDR，新语法是 <tbody> <tr is="vue:tab-descgen"></tr> </tbody> 这就是 Vue 中发生这种情况的原因，主要是HTML 放置限制。 这是因为内容是在 Vue 加载之前渲染的，即 Blade(php) 渲染内容 -> 加载任何 Javascript(Vue) -> Vue 渲染 您需要将所有数据传递给 Vue 组件并在其中执行循环。

为什么这个自定义组件被放置在 <tr> 之外？

表.vue ... ... TableCellRow.vue 表.vue ... <tbody class="table-body"> <slot></slot> </tbody> ... TableCellRow.vue <template> <td class="table-row-cell" :class="this.class"> <slot></slot> </td> </template> 我如何尝试使用它： <my-table> <template #default> <tr> <td>i am inside the tr</td> <----- this is inside the <tr> <table-row-cell> <-------- this is outside of the <tr> i am outside the tr </table-row-cell> </tr> </template> </my-table> 就像这样： <my-table> <tr> <td>i am inside the tr</td> <table-row-cell> i am outside the tr </table-row-cell> </tr> </my-table> 在最新的案例中，这就是我得到的： <tbody class="table-body"> i am inside the tr <td class="table-row-cell"> i am outside the tr </td></tbody> 在第一种情况下我得到这个： <tbody class="table-body"><tr><td>i am inside the tr</td></tr><td class="table-row-cell"> i am outside the tr </td></tbody> 我也尝试过这个： <my-table><template #default> <tr> <table-row-cell> i am outside the tr </table-row-cell> </tr> </template> </my-table> 但我刚刚明白了： <tbody class="table-body"><tr></tr><td class="table-row-cell"> i am outside the tr </td></tbody> 那这是怎么回事？我无法在标签内使用仅包含标签的组件？或者喜欢什么问题？如果我将组件放在标签内，为什么它要么抛出 并仅渲染 ，要么渲染 并将其他所有内容放在其下方？像什么？为什么 Vue 毫无理由地变得如此困难？ 我只想将一个放入我的自定义表格的插槽中，并在其中放入一个自定义组件 - 为什么它必须如此困难？我是绊倒了还是怎么的？我没有错过任何一个结束标签，我的组件都很好，那么为什么会发生这种情况？ 我可以在本地重现问题的最简单的例子： <table class="i-am-the-example-table"> <tbody> <tr class="i-am-the-tr-hello"> <table-row-cell> i am outside of the TABLE itself, but idk why </table-row-cell> </tr> </tbody> </table> tableRowCell 组件： <template> <td> <slot></slot> </td> </template> 全局注册的组件： import TableRowCell from "./components/custom/Tables/TableRowCell.vue"; app.component("TableRowCell", TableRowCell); 我这边的情况是这样的： 由于 OP 未使用任何捆绑程序（因此没有 .vue 文件），解决方法是像这样进行 <tbody> <tr is="tab-descgen"></tr> </tbody> 归功于此处的答案，OP 由于某种原因无法访问。

如何在Vue SFC Playground中从vueuse导入？

当我尝试通过导入映射添加 vueuse 时，如 @vueuse/core": "https://www.unpkg.com/@vueuse/core?module - 由于某种原因，我没有在 vueuse 中获得工作反应性。 导入似乎可行...

有没有办法将组件（同时设置其属性）v-bind 作为另一个组件的属性，如下所示

这就是我想要实现的目标。我想提供 MyParentComponent 一个子组件作为项目...

如何在vue中通过defineExpose访问数据和方法

`我正在尝试在 Vue(composition api) 中访问从子组件到父组件的方法，我已经在 DefineExpose 中定义了该方法，但无法在 par 内访问它...

VS Code with Vue 向我展示：属性 '' 在类型 '{}'.ts(2339) 上不存在

在 Visual Studio Code 中，我有以下代码： const parseCSV = () => { // 为简洁起见省略代码 } } < 在 Visual Studio Code 中，我有以下代码： <script lang="ts" setup> const parseCSV = () => { // Code omitted for brevity } } </script> <template> <button @click="parseCSV">Parse</button> </template> IDE 在 parseCSV 下显示一条波浪线。显示的消息是： 类型“{}”上不存在属性“parseCSV”。ts(2339) 原因是什么？ 重新启动扩展“Vue - 官方”帮助我解决了这个问题。 我是这样做的： 打开扩展视图：您可以通过单击侧边栏上的方形图标或按 Ctrl+Shift+X 打开扩展视图。 查找 Vue 官方扩展：在“扩展”视图的搜索栏中输入“Vue 官方”。 禁用和重新启用：单击“禁用”可暂时关闭扩展程序。然后，单击启用以重新启动它。

VueJs3 pinia 商店未通过 axios 发布来纠正环境文件中的 api url

我有一个在本地工作的 .env 文件，其中包含以下设置：（相同主机，不同端口） VUE_APP_API_URL=http://localhost:5038 VUE_APP_UI_URL=http://localhost:8080 关于托管服务：（我是...

VueJs OnMount 道具生成“预期对象，未定义”警告

我有以下组件： 从 'vue' 导入 { ref, onMounted } 从 '@/</desc> 导入网格 <question vote="0"> <p>我有以下组件：</p> <pre><code>&lt;template&gt; &lt;Grid :items=&#34;items&#34; /&gt; &lt;/template&gt; &lt;script setup&gt; import { ref, onMounted } from &#39;vue&#39; import Grid from &#39;@/components/Grid.vue&#39; import { getData } from &#39;@/services/getData&#39; const items = ref() onMounted(async () =&gt; { items.value = await getData() }) &lt;/script&gt; </code></pre> <p><pre><code>Grid</code></pre> 组件实例需要填充 <pre><code>items</code></pre> 才能显示数据，但我需要运行 <pre><code>getData()</code></pre> 才能准备好数据。当我运行此代码时，我收到 <pre><code>type check failed for prop &#34;items&#34;. Expected Object, got Undefined</code></pre> 警告。</p> <p>发生这种情况是因为当文件首次启动时，<pre><code>items</code></pre>在<pre><code>getData()</code></pre>完成之前没有任何内容。如何在警告出现之前运行 <pre><code>getData()</code></pre>？</p> </question> <answer tick="false" vote="0"> <p>在加载数据之前，您的 <pre><code>items.value</code></pre> 是 <pre><code>undefined</code></pre>，因此导致错误。 初始化为</p> <pre><code>const items = ref(&lt;object&gt;) </code></pre> <p>其中 <pre><code>&lt;object&gt;</code></pre> 是最初输入网格的适当格式（对象（具有特定格式或空）或数组）。</p> </answer> </body></html>

Electron 和 vuejs 的桌面应用程序

我有一个 BeginTestView.vue 页面，其中有一个开始测试按钮。单击此按钮将启动一个 exe 文件，其中包含 C# 中的 Nunit 测试。我想在 Vue com 中使用 child_process execFile 运行 exe...

Vue3 无法导入 `@cornerstone/tools` ，错误为 `ICRPolySeg.wasm`

在Vue 3中，我无法导入@cornerstone/tools 从“@cornerstonejs/tools”导入*作为cornerstoneTools； window.cornerstoneTools =cornerstoneTools; 上面会遇到bug： ./

Nuxt3 - NuxtLink 锚点在单击或页面刷新时不滚动

我只是想让页面滚动到 Nuxt3 中的锚点，但我无能为力。它不会在点击时滚动，也不会在使用网址中的锚点刷新页面时滚动。 我只是想让页面滚动到 Nuxt3 中的锚点，但我无能为力。它不会在点击时滚动，也不会在使用网址中的锚点刷新页面时滚动。 <nuxt-link :to="{path: '/', hash: '#projects'}">Let's go</nuxt-link> 尝试了一堆其他SO答案，将自定义scrollBehaviour代码添加到nuxtConfig不起作用，并且尝试在Nuxt3中安装vue-scrollTo在使用vue-scrollTo模块运行应用程序时给了我这个错误 错误无法重新启动 nuxt：序列化未定义 任何帮助将不胜感激！ 完整代码 <script setup> import '@/assets/css/main.css'; const { data } = await useAsyncData('home', () => queryContent('/').find()) const projects = data </script> <template> <div> <div class="flex flex-col h-screen"> <div class="lg:p-20 p-10 text-white bg-orange-500"> <p class="font-playfair lg:text-7xl text-4xl mb-5">Kia Ora, my name is <span class="font-medium italic">George Bates</span></p> <p class="font-lato lg:text-3xl text-xl mb-5">Content creator and web developer in Auckland, New Zealand</p> </div> <div class="lg:p-20 p-10 text-white flex flex-grow" style="background-image: url('images/header.jpg'); background-position: center; background-size: cover;"> <nuxt-link :to="{path: '/', hash: '#projects'}">Let's go</nuxt-link> </div> </div> <main class="lg:p-20 p-10" id="projects"> <p class="text-3xl font-playfair mb-5 font-semibold pb-2 text-orange-500">Some of my work</p> <Projects :projects="projects" /> </main> </div> </template> 您说您已经尝试添加自定义scrollBehavior，但您是如何做到的？ 我对 Vue 和 Nuxt 非常陌生，但是感谢 这个 Github 答案，你可以自定义滚动行为，这对我有用： 文件app/route.options.ts： import type { RouterConfig } from '@nuxt/schema'; // https://router.vuejs.org/api/#routeroptions export default <RouterConfig>{ scrollBehavior(to, from, savedPosition) { return { el: to.hash, behavior: 'smooth', }; }, }; （这里我放了一个平滑的行为，但默认似乎是auto） 并使用如下代码示例： ... <NuxtLink :to="{path: '/', hash: '#anchor'}">Let's go!</NuxtLink> ... 对我有用的更简单。只需将以下内容添加到 nuxt.config.ts 文件中： router: { options: { scrollBehaviorType: "smooth", }, }, 这就是您所需要的。 您可以在“哈希链接的滚动行为”标题下阅读官方 Nuxt3 文档的更多内容。 希望有帮助！

如何在 HTML 上显示 MediaType 图像响应

我正在使用 MediaType.IMAGE_JPEG 从本地文件返回图像源。如果我通过 Postman 拨打电话，我可以看到该图像，但我无法成功在 HTML 上显示它。 @GetMapping(值...

如何解决“无法解析'@/...'中的导入””vitest的问题？

这是我得到的错误。我在“vite.config.ts”文件中定义的文件路径有问题。你能帮助我吗？ 错误日志 错误信息： 失败测试/utils/ConvertFromDomainToCount...