vue.js 相关问题

如何使用ag-grid禁用行？

我与ag-grid合作，我发现了如何在文档中禁用列（https://www.ag-grid.com/documentation-main/documentation.php） 但读完文档后，我从来没有找到如何才能只排一行

Vue 3中如何通过点击父组件中的按钮来调用子组件的函数？

我有一个名为“MediaImport”的组件，它的“方法”中有一个“上传”功能，我需要在单击“MediaUplo...”父组件中的相应按钮时执行它。

如何在 vue 3 组合 api 中将组件作为 props 传递？

我想将 props customActionComponent 作为组件传递，并且需要在子组件中渲染 FlightDetail.vue 我想将 props customActionComponent 作为组件传递，并且需要在子组件中渲染 FlightDetail.vue <template> <ComponentCard title="Flight Details" subtitle="March 25th" :tableComponent="FlightDetailTable" :actionComponent="customActionComponent" /> </template> <script setup> import ComponentCard from '@/components/ComponentCard.vue' import FlightDetailTable from '@/components/FlightDetailTable.vue' const customActionComponent = { template: ` <v-row align="center"> <v-col> <v-btn class="rounded-pill ml-3 custom-button"> <v-icon>mdi-arrow-left</v-icon> </v-btn> </v-col> <v-col class="d-flex justify-end"> <v-btn class="rounded-pill custom-button"> Flight </v-btn> <v-btn class="rounded-pill ml-4 mr-4 custom-button"> Delay </v-btn> </v-col> </v-row>`, } </script> <style scoped> .custom-button { background-color: #114b5f; color: white; font-weight: bold; } </style> ComponentCard.vue <script setup> import { defineProps } from 'vue' const props = defineProps({ title: String, subtitle: String, tableComponent: Object, actionComponent:Object, }); </script> <template> <v-card variant="text"> <v-card-item> <v-card-title style="color: #114b5f;">{{ props.title }}</v-card-title> <v-card-subtitle style="color: #114b5f;">{{ props.subtitle }}</v-card-subtitle> </v-card-item> <v-card-text> <component :is="props.tableComponent" /> </v-card-text> <v-card-actions v-if="props.actionComponent"> <component :is="props.actionComponent" /> </v-card-actions> </v-card> </template> tableComponent 可以渲染成功，但actionComponent 不可见。 定义 customActionComponent 并在子组件中作为 props 传递的最佳方法是什么 customActionComponent是一个尚未被Vue编译的组件对象。如果您想让它工作，请在导入映射中将 https://unpkg.com/vue@3/dist/vue.esm-browser.js 替换为 https://unpkg.com/vue@3/dist/vue.esm.js 以包含编译器。这可能会给您的应用带来更大的尺寸。 如果可以的话，建议使用slots。 我肯定会在这里使用named slots。我不明白你为什么想用道具来做到这一点。

如何在vue.js webpack项目上正确设置favicon.ico？

我使用 vue-cli 创建了一个 vue webpack 项目。 vue 初始化 webpack myproject 然后在开发模式下运行项目： npm 运行开发 我收到这个错误： 加载资源失败：服务器响应...

如何在弹出窗口下拉列表中打开模式，然后弹出窗口关闭并且模式传送到页面正文？

我正在使用 VueJS、tailwind css 和 headless ui 创建一个包含模式的弹出窗口下拉列表。 当从下拉列表中选择模态时，下拉列表应关闭，并且模态

VUE 3 & Quasar QSlideItem 组件，@left : (详细信息) => void

我正在使用 Quasar 的 QSlideIten (q-slide-item) 和 @left & @right 事件。 我正在使用 Quasar 的 QSlideIten (q-slide-item) 和 @left & @right 事件。 <q-slide-item v-for="(tournament, index) in tournamentsFiltered()" :key="tournament.id" clickable v-ripple left-color="blue-5" right-color="red-5" @left="editTournament" @right="deleteTournament(tournament)" bordered :class="{ 'top-border' : index == 0, 'bottom-border' : index == tournamentsFiltered().length - 1 }" > 在此示例中，左侧事件启动 editTournament，没有 ()。 const editTournament = ({reset}) => { console.log('Edit tournament: ') reset() } 在我的函数 editTournaments 中，我可以访问从 q-slide-item 接收的方法，reset()。 在我的第二个函数，deleteTournaments 中，我需要访问索引或锦标赛详细信息，并将锦标赛作为参数发送。 const deleteTournament = (tournament) => { console.log('Delete tournament:', tournament) // How do I access reset() -OR- is my approach wrong } 问题是当我使用 Trail () 来调用这些函数中的任何一个时，reset() 方法在我的函数中不可用。 任何人都可以引导我走向正确的方向吗？ 谢谢你。 想通了。 更改了@right="deleteTournament(tournament, $event.reset)"，然后在deleteTournament函数中可以使用reset()，并确认按预期工作。 我想我学到了一些新东西，你可以传递像 $event.<method> 这样的方法作为参数......

Laravel Vue js 注销出现错误未捕获的运行时错误：

也可使用 Laravel 和 Vue js 2 项目 我已经使用 Laravel 和 Vue js 2 以及 Laravel Passport 实现了用户身份验证系统。我使用邮递员的后端工作正常，注销为 w...

使用 ref 的 vue3 性能警告

vue 抛出此消息： Vue 接收到一个 Component，该 Component 被制成响应式对象。这个可以 导致不必要的性能开销，应该避免 用标记标记组件...

使用 v-for 引导 vueJS 表

所以在我的项目中我遇到了一个问题， 所以我想做的是，我在这个对象中有一个用户（对象）列表，我有一个属性 teamId（从 api 端点调用），我必须...

Nuxt.config.js 不在 cwd 中

我想在Nuxt项目中使用'npm rungenerate'，但我有错误： 路径 C:/Users/Марина/OneDrive/Desktop/weHost/zabota-dialog/nuxt.config.js 不在 cwd C:\Users\Марина\OneDrive\Desktop\weHost\z...

Vue.JS“TypeError：reverseMessage不是函数”

我正在尝试使用 Vue 反向显示字符串。我的模板是： ...

Q-table：从单个字段渲染多个列？

我有一个类星体表，它显示从 API 获取的一些信息，并且我正在尝试以有意义的方式定义列。除其他外，API 返回以下内容： { ”

使用 Vue 3 在 InertiaJS 中定义全局组件

我正在尝试在 Laravel 8.38 - InertiaJS 0.8.4 上构建一个应用程序，我使用 Vue 3 作为我的前端堆栈。 我有多个布局，我需要将它们全局注册为 Vue 组件，这样我就可以...

Highcharts 未在基本 vue js 应用程序中呈现。返回空 div

我有一个简单的 Vue js 应用程序。我正在尝试将高图表渲染到应用程序中。我知道我正在从数据库中获取数据，但现在我没有在图表中使用这些数据。但我稍后会的。现在我只是

无法让 Ant Design 与 Vue 3 微前端应用程序配合使用

我正在使用 vite-plugin-federation 使用 Vue 3 创建一个微前端应用程序。有一个公开组件的远程应用程序，还有一个将使用这些组件的主机应用程序。我去过

Vuetify textarea - 事件传播实际上是如何工作的？

我遇到了一个奇怪的情况，组件的使用如下： 我遇到了一个奇怪的情况，使用以下组件： <template> <v-app> <v-container> <v-menu v-model="menu" :close-on-content-click="false"> <template #activator="{ props }"> <v-btn v-bind="props"> Open </v-btn> </template> <v-card> <v-card-text> <v-form> <v-textarea label="sample text"></v-textarea> </v-form> </v-card-text> <v-card-actions> <v-btn @click="menu = false"> Close</v-btn> </v-card-actions> </v-card> </v-menu> </v-container> </v-app> </template> <script setup> import { ref } from 'vue' const menu = ref(false) </script> Vue Playground 链接 通常，当在 v-textarea 内按 Enter 时，结果将是添加换行符。 然而，在这种情况下，打开菜单写一些东西并按 Enter 键不会执行任何操作。 如果我删除 v-card-actions 组件，按 Enter 键将添加换行符，但也会关闭菜单。这不是所需的行为（这是一个减少示例。）。 如果我随后将 @keydown.enter.stop="" 事件处理程序添加到 v-textarea，一切都会按我的意愿进行。 由于最后一步使其工作，我怀疑事件传播中发生了一些奇怪/有缺陷的事情，或者我没有正确理解。 这是怎么回事？ 它看起来是由 v 菜单上的 function 引起的，该函数在收到 Enter keydown 事件时运行。该函数调用 e.preventDefault()，因此可以防止出现新行。 只要 keydown 事件在 v 菜单之前停止传播，这种情况就不会发生。您可以将 @keydown.enter.stop 移动到 v-textarea 和 v-card（包括）之间的任何元素上，然后将创建新行。

在 q-expansion-item 中显示 Vue.js 组件的问题

我正在使用 Quasar 框架开发 Vue.js 项目，但遇到了一个问题。我有一个项目列表 (essentialLinks)，我正在使用 q-expansion-i 内的 EssentialLink 组件来显示这些项目...

Vue-“缺少分号”错误的问题

我正在学习vue，我遇到了恼人的错误[vue/compiler-sfc]缺少分号。在这部分代码中： 导出默认值{ 道具：['页面创建']， 数据（）{ 页面标题：''，...

Vue.js - ref() 与 DefineModel()。有什么区别？

我是 Vue.js 世界的新手。所以我不明白 ref() 和 DefineModel() 之间的区别。我在 YouTube 上看过教程，他们说这让父母和孩子之间的沟通更容易

使用 schema 使 vue-form-generator 部分可折叠

我正在使用 vue-form-generator 库来创建表单。 问题是我的表单上有 116 个问题，我想折叠一些问题，使表单更易于用户管理。 我...