vue.js 相关问题

尝试在 quasar 应用程序中使用 Vue 插件 (Vue3Mq) - 如何配置？

我正在尝试为我们配置一个 quasar javascript 应用程序 Vue 插件（Vue3Mq - 用于媒体查询功能）。 使用 npm 安装 Vue3Mq 后，我尝试了以下操作但没有成功： 添加V...

使用 webpack5 模块联合在 Vue 中 React 应用程序

我创建了简单的 React App HelloComponent 并尝试插入到 Vue 应用程序中，但我没有成功 // 反应 webpack 配置 const { ModuleFederationPlugin } = require('webpack').container; 反对...

Vuetify3：如何禁用取消选择 v-list-item？

我有一个显示的姓名列表。当我单击某个项目时，它会以蓝色（原色）突出显示，当我再次单击它时，突出显示会被删除，但选定的用户仍然保留...

V-Text-field type="date" 问题 Vuetify Javascript

我在 Safari 中遇到仅显示日期初始状态的问题 当在 Safari 上加载视图时，它会自动显示今天的日期，甚至我的初始状态是： sell_act_at:"...

未捕获（承诺中）类型错误：在应用程序中使用 firebase 数据时无法读取未定义的属性（读取“displayName”）

我正在使用 firebase 9 和 vue3，并在尝试使用文档中的数据时收到此错误。我 console.log 数据，它显示正确，但它指出它是未定义的。我也确定了我的d...

有条件地包装 vue 3 元素

在 Vue 3 中，如何有条件地包装元素而不是使用 v-if 指令创建两个单独的块？ 我这里有一个简化的示例，但问题涉及条件包装。

如何在primevue中添加跳转到活动选项卡的按钮

跳转到活动选项卡 <template> <div> <Button @click="jumpToActiveTab">Jump to Active Tab</Button> <TabView :scrollable="true" previousIcon: { class: 'text-indigo-900 w-8'}> <TabPanel v-for="(a, index) in filteredTabledata" :key="index"> <template #header> <span :class= "[index == activeIndexVal ? 'text-white font-black' : 'text-white font- medium']" @click="getDataId(a['_id'], a['Status'])">{{a.Account_id }} </span> </template> </TabView> </div> </template> import TabPanel from 'primevue/tabpanel'; import TabView from 'primevue/tabview'; export default { components: { TabView, TabPanel }, data() { tabledata: [], }, computed:{ filteredTabledata() { return this.tabledata.filter(item => String(item.Account_id).startsWith(this.searchQuery)); } }, methods:{ getData(){ axios.get('url').then({ this.tableData = res.data }) }, jumpToActiveTab(){ console.log('jump to active tab') } } </script> 我使用primevue tabview，我想在跳转到活动选项卡按钮中实现登录。 如果用户单击该按钮，它应该将用户带到活动标签页 如果用户位于最后一页，但活动选项卡位于第一页，则意味着单击后必须移动到第一页，而无需使用上一页或下一页按钮导航。 请参阅 PrimeVue 文档 如果你学过Vue，不到2分钟就可以搞定。 <TabView v-model:active-index='targetIndex'> 然后将 targetIndex 添加到 data()。 现在 this.targetIndex 是活动选项卡的索引。它是反应性的，因此设置 this.targetIndex 将更改 UI。你可以做到的。

Vue 3 Google 登录用户身份验证在控制台中显示已弃用的警告

我正在尝试在我的 Vue 3 应用程序中实现使用 Google 登录功能，我找到了一些 npm 包来实现此功能，但是这些包很快就会被弃用（这

如何在VueJS中实现Google登录API？

所以我使用了 https://developers.google.com/identity/sign-in/web/ 中的指南和代码 当我点击按钮时，它工作正常，它会将我重定向到谷歌登录页面，并且没有出现问题

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 一个子组件作为项目...