vue.js 相关问题

如何禁用单个 v-expansion-header

（我正在使用 Vue 2.6）-我阅读了 vuetify 上 v-expansion-panels 的文档，其中说它已禁用要设置的属性，但它设置了整个 v-expansion-panel 禁用，我想禁用一个

Laravel Vue axios 端点获取数据并在控制台日志中显示，但不在 Vue 模板中

我有一个 laravel 8 项目，最近从版本 7 升级。我更新了 webpack 和 package.json 等。 这是我的 Vue 模板的准系统结构，它应该显示文档...

具有全局组件和 TypeScript 支持的 Vue 3 库

我正在使用 Vue 3、Vite 和 TypeScript 构建 Vue 3 组件库。该库作为插件安装，并将所有组件注册为全局变量。看起来是这样的： // src/index.ts 常量

仅将上传的 zip 中的某些文件发布到服务器 - JSZip

我有一个 Vue 应用程序，用户上传一个 zip 文件，我想从 zip 中选择某些文件（其中包括许多文件和文件夹）并将它们发布到服务器。我知道这样做更容易......

在 Nuxt 3 中使用可组合项对组件进行 Vitest 单元测试

我正在尝试在基于 Nuxt 3 构建的项目中开始使用 Vitest 测试组件。 我对使用可组合项的组件有疑问。 组件/Main/Navbar.vue： ... 常量 {</desc> <question vote="0"> <p>我正在尝试在基于 Nuxt 3 构建的项目中开始使用 Vitest 测试组件。 我对使用可组合项的组件有疑问。</p> <p>组件/主/Navbar.vue：</p> <pre><code>... &lt;script setup&gt; const {customRoute} = useCustomRoute() ... &lt;/script&gt; </code></pre> <p>composables/useCustomRoute 是我的可组合项，带有代码：</p> <pre><code>export const useCustomRoute = () =&gt; { ... const {locale} = useI18n() const localeRoute = useLocaleRoute() const customRoute = (route) =&gt; { const createdRoute = localeRoute({ name: route.routeName, params: { type: route.translations[locale.value] } }) return createdRoute.fullPath } ... return { customRoute, ... } </code></pre> <p>测试/组件/Main/Navbar.test.ts：</p> <pre><code>import {it, expect,describe} from &#39;vitest&#39; import {MainNavbar} from &#34;#components&#34;; describe(&#39;MainNavbar&#39;, () =&gt; { // THIS WORKS NORMALLY, THE TEST IS CORRECT expect(MainNavbar).toBeTruthy() // BUT WHEN I ADD THESE TWO LINES THEN TEST IS FAILED const wrapper = await mountSuspended(MainNavbar) expect(wrapper.html()).toContain(&#39;number&#39;) }) </code></pre> <p>（我注意到 MainNavbar.vue 组件包含“number”一词，因为删除上面两行后（constwrapper = .... & Expect(....)），测试通过）</p> <p>运行测试后，出现错误：</p> <pre><code>SyntaxError: Need to install with `app.use` function </code></pre> <p>我的发现： 当我从 MainNavbar.vue 中删除这一行（其可组合项的导入）：</p> <pre><code>const {customRoute} = useCustomRoute() </code></pre> <p>...测试通过。</p> <p>我尝试了很多选项，例如模拟可组合项。</p> <pre><code>mockNuxtImport(&#39;useCustomRoute&#39;, () =&gt; { return useCustomRoute }) </code></pre> <p>或</p> <pre><code>afterEach(() =&gt; { vi.unstubAllGlobals() }) </code></pre> <p>或</p> <pre><code>vi.stub(&#39;../../composables/useCustomRoute&#39;, async (original) =&gt; { const composable = await original() return { // @ts-ignore ...composable, customRoute: vi.fn() } }) </code></pre> <p>或</p> <pre><code>vi.stubGlobal(&#34;useCustomRoute&#34;, () =&gt; ({ $fmt: { customRoute: vi.fn() }, })); </code></pre> <p>或</p> <pre><code>vi.stubGlobal(&#39;useCustomRoute&#39;, () =&gt; ({ customRoute: () =&gt; &#39;&#39; })) </code></pre> <p>请帮助我运行测试，以便使用可组合项的组件也可以得到测试。谢谢。</p> <p>vitest.config.ts</p> <pre><code>import { defineVitestConfig } from &#39;@nuxt/test-utils/config&#39; export default defineVitestConfig({ test: { environment: &#39;nuxt&#39;, }, }) </code></pre> </question> <answer tick="false" vote="0"> <p>我的完整代码：Navbar.test.ts</p> <pre><code>import {it, expect, describe} from &#39;vitest&#39; impomt {mockNuxtImport, mountSuspended} from &#34;@nuxt/test-utils/runtime&#34;; import {MainNavbar} from &#34;#components&#34;; mockNuxtImport(&#39;useCustomRoute&#39;, () =&gt; { return useCustomRoute() }) describe(&#39;MainNavbar&#39;, () =&gt; { it(&#39;should mount&#39;, async () =&gt; { expect(MainNavbar).toBeTruthy() const wrapper = await mountSuspended(MainNavbar) expect(wrapper.html()).toContain(&#39;number&#39;) }); }) </code></pre> </answer> </body></html>

如何在 Vue.js 中使用 /deep/ 或 >>> 或 ::v-deep？

所以，我在这里读到，在 Vue.js 中，您可以在选择器中使用 /deep/ 或 >>> 来创建适用于子组件内部元素的样式规则。然而，尝试使用这个...

Vue3 相当于 vNode.compulatedInstance

我正在将我的应用程序从 Vue2 转换为 Vue3，但我的表单的一方面已陷入停滞。 我将 SFC 用于表单元素组件（FormInput、FormTextArea、FormCheckbox...

如何使用 Vue 3 Composition API 调用槽中组件公开的方法

插槽（父组件中）中有一些组件（子组件），我想调用它们的方法。我尝试了以下步骤： 使用 useSl 将子组件作为对象检索...

npm init 导致包管理器控制台卡住“随时按 ^C 退出。”

当我尝试在包控制台管理器中输入“npm init”时，它会启动该进程，但控制台显示消息：“随时按 ^C 退出。”。我可以创建我的 p...

Vuejs。无法设置未定义的属性（设置）

数据（）{ 返回 { 订单数量：空， } }, 方法： { 显示数量（产品 ID）{ this.carts.filter(函数(购物车) { 如果（购物车.产品_...

为什么在传递响应式 prop 时出现“没有与此调用匹配的重载”错误？

在我的主应用程序中我定义了 从“luxon”导入{DateTime} const now = ref(DateTime.now()) const maxCityNameSize = ref(0) 然后将变量传递给组件： 在我的主应用程序中我定义了 import { DateTime } from "luxon" const now = ref(DateTime.now()) const maxCityNameSize = ref(0) 然后将变量传递给组件： <time-bar :now="now" :maxCityNameSize="maxCityNameSize"></time-bar> 在该组件中，它们被定义为 const props = defineProps({ now: { type: DateTime }, maxCityNameSize: { type: Number }, }) 我的代码按预期工作，但我得到了上面的 props TypeScript 错误，我无法理解： No overload matches this call. Overload 1 of 3, '(props: string[]): { readonly [x: string]: any; }', gave the following error. Overload 2 of 3, '(props: ComponentObjectPropsOptions<Data>): { readonly [x: string]: Prop<unknown, unknown> | null | undefined; }', gave the following error.ts(2769) runtime-core.d.ts(322, 53): The expected type comes from property 'now' which is declared here on type 'ComponentObjectPropsOptions<Data>' 我从未见过该错误（尽管使用了很多道具） - 这意味着什么？ 为了完整起见，我添加了另一个作为 prop 传递的反应变量，它不会触发错误。 在寻找原因时，普遍指出错误是由于函数的参数数量错误（不适用）或类型不匹配（我也没有看到类型不匹配）。 我进行了双阶段 props 声明，linter 很满意（代码也很满意）： import { DateTime } from 'luxon'; const props = defineProps(['now', 'maxCityNameSize']) const now = ref<DateTime>(props.now) const maxCityNameSize = ref<number>(props.maxCityNameSize) 您应该像这样在 prop setup 中定义类型： const props = defineProps<{ now: DateTime, maxCityNameSize: Number, }>(); 在这里您可以找到更多信息 https://vuejs.org/guide/typescript/composition-api#complex-prop-types

popup.html 文件未包含在使用 vite 构建的 chrome 扩展中

我正在使用这个 github cli 插件来使用 vue 和 vite 搭建 mv3 chrome 扩展。 模板已正确创建，我可以使用它，但当我想使用 chrome 时遇到问题。

通过 OptionsAPI 使用可组合项

我们的团队正在将应用程序从 Vue 2 转换为 3，我正在处理最后的步骤。 我正在研究是否可以将 mixin 文件转换为可组合文件。我还没有找到任何文档

V-If 元素无论条件如何都显示为 false

我面临的问题是我的 v-if 元素无论其值是否解析为 null、'null'、false 或 falsy 都会显示。这是一个最小的可重现示例：JS Fiddle ...

如何将组件字符串转换为vue中的真实组件

嗨，我对插件商店有一个要求，我需要将组件从核心加载到插件中，在插件内部我需要将该字符串转换为真正的组件，以便我可以使用它。 注：更好

vue vitest 中模拟 bugsnag 通知方法的问题

在 Vitest 中，我如何导入和模拟 Bugsnag 通知方法，以便我可以检查它是否在失败工作流程中被调用并出现特定错误

为什么当 div 里面有 vue keepalive 时不起作用？

为什么这个 div 会阻止 keep-alive 工作？ <...

为什么具有 Pinia 存储的 Vue 组件中的反应性需要计算属性？

我将我的网络应用程序（Vue 和 Supabase）的经过身份验证的用户存储在 Pinia 商店中：userStore.user。我的导航栏组件有一个基于此状态的登录/注销链接。为了使其具有反应性

打开另一个下拉菜单时关闭

我是 Vue.js 新手，我为我的课程制作 CRUD 项目。 我在下拉菜单行为方面遇到问题。有人可以帮助我吗？ 我想 ： 下拉菜单无活动状态自动关闭（colla...

Vue3 prop String 或 PropType

我在 Vue3 项目中有一个组件，它接受一个 prop，它可以是字符串也可以是对象。 所以像这样： 从“vue”导入{defineComponent} const 组件 = 定义组件({