vue-component 相关问题

我如何强制我的一些 vue 组件实现一个方法？

我使用带有OptionsAPI 的Vue 3 和defineComponents 来使用打字稿实现我的组件。 有什么方法可以让我的一些组件扩展一个接口，迫使它们实现

如何使用 Vuetify3 和 vitest 在 Vue3 中测试传送的对话框？

我有以下问题： 我正在尝试使用 vitest 和 jsdom 为以下 Vuetify 3 对话框编写测试。 对话框组件 我有以下问题： 我正在尝试使用 Vuetify 3 和 vitest 为以下 jsdom 对话框编写测试。 对话框组件 <template > <div class="text-center"> <v-dialog v-model="dialog" width="auto"> <template v-slot:activator="{props}"> <v-btn id="open" to="#my-teleport" @click="dialog=true" color="primary" v-bind="props"> Open Dialog </v-btn> </template> <v-card> <v-card-text>Test Text</v-card-text> <v-card-actions> <v-btn id="close" color="primary" block @click="dialog = false">Close Dialog</v-btn> </v-card-actions> </v-card> </v-dialog> </div> </template> <script> export default { data ({props}) { return { dialog: false, } }, } </script> 测试： describe('Dialog', async () => { beforeEach(() => { const el = document.createElement('div'); el.id = 'my-teleport'; document.body.appendChild(el); }); afterEach(() => { document.body.outerHTML = '' }) test('test open dialog', async () => { const wrapper = mount(Dialog, { global: {plugins: [vuetify]}}); const openBtn = await wrapper.find('#open'); await openBtn.trigger('click') expect(wrapper.vm.dialog).toBe(true) console.log(wrapper.html()); const dialog= wrapper.getComponent('VDialog') dialog.getComponent('VBtn') }); }); 运行测试时遇到的错误 错误：无法使用选择器 v-dialog 获取组件： <div class="text-center"><a class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" id="open" modelvalue="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span> <!----><span class="v-btn__content" data-no-activator=""> Open Dialog </span> <!----> <!----> </a> <!--teleport start--> <!--teleport end--> </div> 你知道我该如何测试这个或者问题出在哪里吗？我尝试根据传送测试进行测试 文字但没用。 提前致谢！ 您可以创建一个存根模拟组件或使用此官方指南来测试传送组件https://test-utils.vuejs.org/guide/advanced/teleport.html

BeforeRouteEnter 未将数据加载到变量

我已经设置了一个可以正确发送数据的Web API，但是，我的vuejs应用程序有一个数据表组件，我使用BeforeRouteEnter钩子与Axios进行API调用，但来自resp的数据...

Vue.js 无需重新加载页面即可更新数据

我这里有 2 个组件，Create.vue 和 ModalAddEventName.vue。 Create.vue 组件包含一个名称下拉列表和一个用于打开 ModalAddEventName.vue 的按钮。 添加数据有效...

vue-router 中中间件的正确使用方式

我在vue中创建了路由，并在每个路由之前定义了一些中间件条件。但它没有按我的预期工作。 这是 router/index.js 文件。 const 令牌 = 计算(() => useAuthSto...

将输入值传递给vue组件

我是 vuejs 新手，我正在为按钮、链接、输入等元素创建自定义组件。 这是我的输入组件- ... 我是 vuejs 新手，正在为按钮、链接、输入等元素创建自定义组件。 这是我的输入组件- <template> <div class="position-relative"> <input :class="[{ 'pe-5': type === 'password' }, 'form-control p-2 rounded-3']" :type="inputType" :id="label ? slugify(label) : null" v-model="inputValue" v-bind="$attrs" /> <CustomButton type="button" transparent class="position-absolute end-0 top-50 translate-y--50" v-if="type === 'password'" @click="togglePasswordVisibility" > <RemixIcon :icon="showPassword ? 'eye-off-line' : 'eye-line'" /> </CustomButton> </div> </template> <script> import RemixIcon from '../components/RemixIcon.vue'; import CustomButton from '../components/CustomButton.vue'; export default { components: { RemixIcon, CustomButton }, props: { type: { type: String, default: 'text', }, label: { type: String, default: '', }, }, data() { return { inputValue: '', showPassword: false, }; }, computed: { inputType() { return this.showPassword ? 'text' : this.type; }, }, methods: { togglePasswordVisibility() { this.showPassword = !this.showPassword; }, slugify(str) { return str .toLowerCase() .trim() .replace(/[^\w\s-]/g, '') .replace(/[\s_-]+/g, '-') .replace(/^-+|-+$/g, ''); }, }, }; </script> <style scoped></style> 当我在上面使用 v-model 时，它无法正常工作 <TextInput type="text" v-model="user_name" /> 在这种情况下 user_name 有一个默认值，但它不会出现在输入中。 我想将 v-model 与此输入一起使用并使其可用。 我尝试在网上搜索并询问人工智能工具，但没有任何效果。 你可以看到docs，你必须更新自定义组件中的值

如何在静态页面挂载Vue组件？

如何在现有的 HTML 页面中挂载 Vue 组件？ 我尝试了几个小时，我最近的尝试如下所示： main.js： 从“vue”导入 Vue Vue.component('MyComponent', require('./MyComponen...

如何在vuejs自定义指令中传递动态参数

例如。动态文字 = '好的' 这样在自定义指令中： Vue.directive('目录...

如何约束用户选择今天日期以外的日期

我正在使用带有选项 API 的 Vue3。 鉴于此 StackBlitz，我想知道如何为日期选择器设置 :max 值。我将 :max 设置为 new Date()，但我仍然可以选择今天以外的日期...

[Vue.js 3]组件中<slot/>中<textarea>的最佳替代品

我想创建带有文本区域的组件并在其中传递数据，例如 世界你好 但经典的 标签在文本区域内不起作用 什么是简单的...

vuex $store 未在 cypress 组件测试中定义

目前我正在尝试使用vue进行组件测试并使用vuex作为状态管理 当在安装组件上运行测试用例时，我收到错误消息，指出无法读取未定义 l 的属性...

vue.js 函数中在上一个结束之前执行的行

我有以下功能来提交表单： 方法： { 提交表单：函数（）{ this.drawing = dat.toImage(); this.$refs.my_form.submit() } } 绘图变量被分配给...

在自定义组件上使用时，v-model 和 .sync 有什么区别

我不明白组件上使用的 v-model 和 .sync 之间的区别。 V-model 是将变量 (myVar) 绑定到组件本身的简写...

在 Vue3 中 - 从 modelValue 推断出 slotProp 的类型

我简化了我尝试创建的组件： // MyComp.vue 从'vue'导入{PropType，defineProps，defineEmits}； const props = DefineProps({...</desc> <question vote="0"> <p>我简化了我尝试创建的组件：</p> <pre><code>// MyComp.vue &lt;script setup lang=&#34;ts&#34;&gt; import { PropType, defineProps, defineEmits } from &#39;vue&#39;; const props = defineProps({ modelValue: { type: Array as PropType&lt;unknown[]&gt;, required: true, }, }); const emit = defineEmits({ updateModelValue: (value: unknown[]) =&gt; true, }); &lt;/script&gt; &lt;template&gt; &lt;div v-for=&#34;(item, index) in modelValue&#34; :key=&#34;index&#34;&gt; &lt;slot :item=&#34;item&#34; :index=&#34;index&#34;&gt;&lt;/slot&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <pre><code>// Parent.vue &lt;script setup lang=&#34;ts&#34;&gt; import { ref } from &#39;vue&#39; import { MyComp } from &#39;.&#39;; const myArray = ref([ { name: &#39;A&#39;, id: 1, }, { name: &#39;B&#39;, id: 2, }, ]); &lt;/script&gt; &lt;template&gt; &lt;div&gt; &lt;MyComp v-model=&#34;myArray&#34;&gt; &lt;template #default=&#34;{ item }&#34;&gt; &lt;!-- item is of type unknown - type not inferred :( --&gt; &lt;div&gt;{{ item }} &lt;/div&gt; &lt;/template&gt; &lt;/MyComp &gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>我的问题是<pre><code>item</code></pre>的类型没有被推断出来，所以我没有得到我想要的intelliSense。</p> <p>我怎样才能实现这个目标？</p> <p><kbd>（如果没有更多细节，StackOverflow 不会让我发布这个问题，所以我添加了这句话）</kbd></p> </question> <answer tick="false" vote="0"> <p>看起来您已经将数组项类型设置为 <pre><code>unknown</code></pre>。我认为此时 TS 已经没有什么可以推断的了。</p> <p>如果您使用的是Vue 3.3或以上版本，则可以使用<a href="https://blog.vuejs.org/posts/vue-3-3#generic-components" rel="nofollow noreferrer">通用组件</a>：</p> <pre><code>// MyComp.vue &lt;script setup lang=&#34;ts&#34; generic=&#34;T&#34;&gt; import { PropType } from &#39;vue&#39;; const props = defineProps({ modelValue: { type: Array as PropType&lt;T[]&gt;, required: true, }, }); const emit = defineEmits({ updateModelValue: (value: T[]) =&gt; true, }); &lt;/script&gt; </code></pre> <p>这将正确推断类型，请参阅<a href="https://play.vuejs.org/#eNqFU81u2zAMfhXOOyQF4gRbb54TIB1y2IBuxRbsUvVgxHSmxpY0SU4TBH73UZLtOm2X+SKT/PjP7xQtlZrua4ySKDUbzZUFg7ZWUGZiO2eRNSxaMMErJbWFE2gsoIFCywpG5DbqTbfHz7JSrWU6c4KLO/rEBBMbKYyF6rjUOjvC3EUZ3zMB9J3C4z6RVZjAaDmaPOt4nsCHVm7a97XLzUuXjwOXhytfQzoL/VE3JFisVJlZJMnh0pzv218vtt3s40rmWNIc2tr9MDqUR3aB4H2ORVaXlsAn4KSG5hXae7yL42DnBmQB9qgQarET8klAHEQhLXBRoNaYQzKGOH4rkKv51OVqIJ2dN+ExsxeNBmXbXtd86zgARxPaPG2t4Nvpo5GCzsNPnUUbcuQl6u/Kctoqi5JuHyzKylI+ffU6q2tsd0A+v3Gze0P/aA5Ox6I7jQb1HlnU22ymt2iDefXzGx7ovzfSVuqS0BeMP9DIsnY1BthNLXIqe4Dz1X7x18vFdm1WB4vCdE25Qh0yHB2L6JbdzP7V+nO519Nr78dEQ1PseHCJX7BFgZpvSFyfs+1OS7V2BzGk3IBRiuyG+ESnxwU6tBm3JfnD/ZWVNfFjQBh3XgkEHmamT5Cu7x8WAw5p/FNzOr6zhblRNIFMIT1W3PbZVyT02WuV0xndDmoY78NLia5gvuji+nj/pSYRsZCa5jN2xz4hbuR4uKJn0CbNMdnhkUDeesa91JTEqMQ5Ozs9Du1xAzyVQbALpGj+AqPSny0=" rel="nofollow noreferrer">playground</a></p> </answer> </body></html>

从另一个文件调用模态窗口

如何进行模态窗口调用。来自另一个文件？我不明白为什么我做不到。 文件1： 如何进行模态窗口调用。来自另一个文件？我不明白为什么我做不到。 文件1： <template> <section class="header"> <div class="header-container"> <div class="header_start"> <a href="#!" class="header__logo">YooMoney</a> </div> <div class="header-buttons_end"> <button class="header_button" @click="isOpen = true; console.log('Button clicked')">Sign In</button> <teleport to="body"> <Authorization v-if="isOpen" /> </teleport> </div> </div> </section> </template> <script setup lang="ts"> import { ref } from 'vue'; import Authorization from "@/components/ModalWindow/Authorization.vue"; const isOpen = ref(false) </script> 文件2： <template> <MazDialog v-model="isOpen" title="Dialog Title"> <p> Your content </p> <template #footer="{ close }"> <MazBtn @click="close"> Confirm </MazBtn> </template> </MazDialog> </template> <script setup> import { ref } from 'vue' import MazDialog from 'maz-ui/components/MazDialog' const isOpen = ref(false) </script> 呃，对不起。我刚刚学习。 点击“登录”时需要。从文件中打开模式窗口。 我正在使用 nuxt。 您可以通过在子元素中发出来调用它 在你的元素中添加 @click="isOpen = true; newquery 像这样 <button class="header_button" @click="newquery" > const emit = defineEmits(['openmymodal']) function newquery(new_value = "close_modal"){ emit ('openmymodal',new_value) } 并且在您的父元素中您应该添加 <MazDialog v-model="isOpen" title="Dialog Title" @openmymodal="dothisfunction"> <script setup> const dothisfunction= (new_value) =>{ isOpen.value = false }

使用VueJS打开PDF

我希望能够在 VueJS 上打开 pdf。 pdf文件是本地的，无法在线查看。 （我使用的是 Quasar 的按钮，但它的功能与 HTML 按钮相同） 我努力了： 我希望能够在 VueJS 上打开 pdf。 pdf文件是本地的，无法在线查看。 （我使用的是Quasar的按钮，但它的功能与HTML按钮相同） 我已经尝试过： <q-btn id="mebtn" href="../assets/resume.pdf">Click Me</q-btn> 或者 <input type="button" value="Open" onClick="window.open('../assets/Resume.pdf'); 我收到的错误： 无法获取../assets/Resume.pdf 我希望能够单击按钮，然后我的 pdf 会在另一个选项卡上弹出 其他普通的 html 解决方案将不起作用 假设你的目录是这样的： src -> assets --> Resume.pdf 您可以通过以下方式访问： <input type="button" value="Open" onClick="readFile()"); methods: { readFile() { window.open('src/assets/Resume.pdf', '_blank') //to open in new tab } } 使用点击事件，window.open()并要求。 <span @click="handleClick">a pdf file</span> handleClick: () => { window.open(require('/path/to/my/pdf.pdf'), '_blank') } 在 VueJS 中，有一个名为“static”或“statics”的文件夹，您只需将文件移动到“statics”即可通过本地目录访问它。

如何在我的.cshtml页面中调用Vue组件？

我有一个与 Vue.js 结合使用的 ASP.NET Core MVC 项目。我只使用 Vue.js 来使我的页面具有响应性。我的目标是基于 _layout.cshtml 文件中的 div 创建一个主 vue 实例...

Vue 框架中的十进制格式化

我是 Vue 框架的新手。我的要求是在输入框中添加货币格式。 格式设置： 我需要在焦点移出时添加一个带有两个零的小数，并在焦点移入时删除零。v-mo...

按钮的 onClick 不会更改可点击状态

我正在使用 vue3 和 options api 如下面发布的代码所示，当单击复选框时，调用 onToggleBtnClearDigitizedChanged() 导致状态从 false 更改为 true，...

如何强制关闭切换按钮？

我正在使用 vue3 和 options api 以下 stackbiltz 代码中包含的代码位于此处。 我有一个切换按钮，我想将其设置为 3 秒后自动关闭。为了阿...