vuetify.js 相关问题

vee-validate + vuetify 文本输入字段 → 如何迁移到新版本？

我有一个用于登录页面的旧版 Vue2 代码。其中一部分是检查用户名输入字段： ... 我有一个旧的 Vue2 登录页面代码。其中一部分正在检查用户名输入字段： ... <validation-observer ref="ref-id" v-slot="{ invalid }"> <v-form> <v-card-text> <validation-provider v-slot="{ errors }" rules="rulename" name="username" > <v-text-field v-model="input.username" label="username" prepend-icon="mdi-account-circle" :error-messages="errors" ></v-text-field> </validation-provider> ... </v-card-text> </v-form> </validation-observer> ... 现在我正在尝试使用新版本创建相同的代码Vuetify和vee-validate（3和4） 我可以使用新版本的 v-text-field 创建 Vuetify: <vee-validation-form as="v-form"> <v-card-text> <!-- <vee-validation-field as="v-text-field" --> <v-text-field v-model="input.username" label="username" prepend-icon="mdi-account-circle" :error-messages="errors" ></v-text-field> <!-- ></vee-validation-field> --> </v-card-text> </vee-validation-form> 哪里 vee-validation-form 是 Form vee-validation-field 是 Field 此代码至少显示 username 输入元素。 但是当我尝试使用 <vee-validation-field as="v-text-field" 而不是 <v-text-field 时，它显示错误： ERROR Cannot read properties of undefined (reading 'split') TypeError: Cannot read properties of undefined (reading 'split') at normalizeFormPath (webpack-internal:///./node_modules/vee-validate/dist/vee-validate.esm.js:100:26) at ReactiveEffect.eval [as fn] (webpack-internal:///./node_modules/vee-validate/dist/vee-validate.esm.js:1603:70) at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:217:19) at get value [as value] (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:1178:33) at unref (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:1057:29) at _useFieldValue (webpack-internal:///./node_modules/vee-validate/dist/vee-validate.esm.js:1141:70) at useFieldState (webpack-internal:///./node_modules/vee-validate/dist/vee-validate.esm.js:1044:54) at _useField (webpack-internal:///./node_modules/vee-validate/dist/vee-validate.esm.js:1618:72) at useField (webpack-internal:///./node_modules/vee-validate/dist/vee-validate.esm.js:1597:12) at setup (webpack-internal:///./node_modules/vee-validate/dist/vee-validate.esm.js:2038:164) 问题是：如何将v-text-field组件与vee-validate一起使用？据我正确理解，新的 ValidationObserver 中没有 ValidationPbserver 和 vee-validate v4 组件。 Field 组件需要一个 name 属性，当它尝试对值调用 split() 时会抛出错误。只需设置一个名称，错误就消失了： <Field as="v-text-field" name="username" ... ></Field> 但是，label是Field组件的道具，但它仅将属性（即非道具）传递给自定义输入组件（请参阅code），因此您无法将标签传递给v-text -场地。此外，您还必须通过表格获取错误消息。 目前看来使用:as比解决方案更麻烦。可能更好地坚持使用插槽： <vee-validation-field v-slot="{ field, errors }" name="username" rules="required|needsL" v-model="username" > <v-text-field v-model="field.value" v-bind="field" label="username" prepend-icon="mdi-account-circle" :error-messages="errors" /> </vee-validation-field> （由于 vee-validate 中的 问题，VTextField 上有些重复的 v-bind 和 v-model 对于他们来说是必要的） const { createApp, ref } = Vue; const { createVuetify } = Vuetify const vuetify = createVuetify() VeeValidate.defineRule('required', VeeValidateRules.required) VeeValidate.defineRule('needsL', v => v.toLowerCase().includes('L') || 'Input something with an `l`') const app = { components: { 'vee-validation-form': VeeValidate.Form, 'vee-validation-field': VeeValidate.Field, }, setup(){ return { username1: ref('user 1'), username2: ref('user 2'), } } } createApp(app).use(vuetify).mount('#app') <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" /> <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <vee-validation-form as="v-form" v-slot="{errors}"> <v-card-text> Field from :as <vee-validation-field as="v-text-field" name="username1" v-model="username1" prepend-icon="mdi-account-circle" :error-messages="errors.username1" rules="required|needsL" ></vee-validation-field> Field in slot <vee-validation-field v-slot="{ field, errors }" v-model="username2" name="username2" rules="required|needsL" > <v-text-field v-model="field.value" v-bind="field" label="username" prepend-icon="mdi-account-circle" :error-messages="errors" /> </vee-validation-field> </v-card-text> </vee-validation-form> </v-main> </v-app> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/4.10.8/vee-validate.js"></script> <script src="https://cdn.jsdelivr.net/npm/@vee-validate/[email protected]/dist/vee-validate-rules.min.js"></script> 总的来说，上述方法是正确的，但犯了一个重大错误。 就在一周前，我不得不处理我们的大型项目的迁移，该项目有大量的形式，从 Vuetify 2 到 3，从 Vee-validate 3 到 4。在花费了相当多的时间之后，我想提出以下建议研究问题和处理具体案例的时间。我不会继承之前的答案，而是会在一条消息中概述我的整个解决方案，方便寻求答案的人立即掌握主题。 在确定validation-observer和validation-provider组件时，一切都是准确的。就我而言，我注册了名为 和 的 Form 组件和 Field 。对于那些迁移真实项目的人来说，这将节省大量时间，避免重写组件名称。 app .component('validation-observer', Form) .component('validation-provider', Field) 现在，我们应该将 Field 组件视为主要输入组件，而 v-text-field 只是一个视觉对象，它仅与 Field 交换数据，而 Field 现在是验证提供程序。 根据文档，我们可以通过插槽与验证提供程序和我们的字段进行交互，但不是field，而是componentField。它将包含带有 modelValue 键而不是 value 的正确对象，使我们能够正确访问组件的值。这确保了与 Vue 3 的正确兼容性，因为在 2 版本中使用了 value。因此，默认情况下不需要使用 as 参数。包含内部组件的 Field 组件不会显示为标准输入字段，我们在输入组件中通过 v-bind 使用 componentField 插槽。 所以我们需要采取2个行动： 将 v-model 移动到 Field 组件 将 v-bind 添加到我们的输入字段 以下是正确代码的示例（如果需要，请使用您的组件名称）： <validation-observer v-slot="{ handleSubmit }" > <validation-provider v-slot="{ componentField, errors }" v-model="input.username" name="Username" rules="required" > <v-text-field v-bind="componentField" :error-messages="errors" label="Username" prepend-icon="mdi-account-circle" /> </validation-provider> </validation-observer> 现在我们的字段已经与验证组件Field（validation-provider）正确同步了。 对于字段（验证观察者）插槽，请参阅文档。

Vuetify.js：如何将按钮操作放置在 v-card 的左侧和右侧？

在 v-card 的 v-card-actions 组件中，我想使用 mr-0 （margin-right= 0）将一个按钮放在左侧，另一个按钮放在右侧，但这 2 个按钮始终靠近彼此。 我所经历的...

如何在Vue3和Vite中正确设置加载屏幕？

我想在应用程序加载时设置一个加载屏幕。我目前正在使用 Loading 组件并将其时间间隔设置为 2 秒。然而，这不是设置加载屏幕的正确方法...

v-data-table 模板中的事件会针对每个项目触发？

... ... <v-data-table :items="eventData" item-key="myID" ...> ... <template v-slot:item="{ item, index }"> ... <v-checkbox v-model="item.isSelected" :update:modelValue="selectIndividual(index, item)"></v-checkbox> ... </template> </v-data-table> // in my component code-behind: selectIndividual(index, item) { console.log(index, item); }, 以上我都有。一个带有模板的 v-data-table，该模板插入该项目，并且在该模板内有一个复选框。表中的每一行都会有此复选框。该复选框与其他组件混合在一起，因此我无法使用 v-data-table 的 show-select 功能提供的复选框。 这让我在很大程度上到达了我想去的地方。它看起来不错，并且该功能可以在模型更改时运行。但是，当我单击 v-data-table 中的任何行时，我会看到可见页面上每一行的控制台输出。我想要的是我点击触发的单行事件，而不是其他事件。我该如何实现这个目标？ 更新 v-checkbox 以使用 @change 事件，这是 Vuetify 2 v-checkbox 的正确事件 <v-checkbox v-model="item.isSelected" @change="selectIndividual(index, item)"></v-checkbox>

按下 ESC 键时关闭对话框

当用户按键盘上的 ESC 键时，如何关闭没有激活器打开的 vuetify 对话框？

如何删除组标题和自动展开VDataTable组标题

我正在使用 Nuxt 3 和 Vuetify 3.3.1 并使用 v-data-table 和 group by Date 并使用模板组标题，如下所示 从 'vuetify/labs/</desc> 导入 { VDataTable } <question vote="0"> <p>我正在使用 Nuxt 3 和 Vuetify 3.3.1</p> <p>并使用 v-data-table 和按日期分组并使用模板组标题，如下所示</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import { VDataTable } from &#39;vuetify/labs/VDataTable&#39; const headers = ref([ { title: &#39;Employee Name&#39;, align: &#39;start&#39;, sortable: false, key: &#39;name&#39; }, { title: &#39;Time In&#39;, align: &#39;center&#39;, sortable: false, key: &#39;timeIn&#39; }, { title: &#39;Status In&#39;, align: &#39;center&#39;, sortable: false, key: &#39;statusIn&#39; }, { title: &#39;Location In&#39;, align: &#39;center&#39;, sortable: false, key: &#39;locationIn&#39; }, { title: &#39;Time Out&#39;, align: &#39;center&#39;, sortable: false, key: &#39;timeOut&#39; }, { title: &#39;Status Out&#39;, align: &#39;center&#39;, sortable: false, key: &#39;statusOut&#39; }, { title: &#39;Status&#39;, align: &#39;center&#39;, sortable: false, key: &#39;status&#39; }, { title: &#39;Workhour&#39;, align: &#39;center&#39;, sortable: false, key: &#39;workhour&#39; }, { title: &#39;Action&#39;, align: &#39;end&#39;, sortable: false, key: &#39;action&#39; } ]) const items = ref([ { id: 1, date: &#34;12-06-2023&#34;, name: &#39;Geofany Galindra&#39;, timeIn: &#39;07:39:38 WIB&#39;, statusIn: &#39;On Time&#39;, locationIn: &#39;Others&#39;, timeOut: &#39;17:49:18 WIB&#39;, statusOut: &#39;Checked Out&#39;, status: &#39;Present&#39;, workhour: &#39;08:50:28&#39;, }, { id: 2, date: &#34;11-06-2023&#34;, name: &#39;Geofany Galindra&#39;, timeIn: &#39;07:39:38 WIB&#39;, statusIn: &#39;On Time&#39;, locationIn: &#39;Others&#39;, timeOut: &#39;17:49:18 WIB&#39;, statusOut: &#39;Checked Out&#39;, status: &#39;Present&#39;, workhour: &#39;08:50:28&#39;, }, ]) const groupBy = ref([ { key: &#39;date&#39; } ]) &lt;/script&gt;</code></pre> <pre><code>&lt;template&gt; &lt;v-data-table :group-by=&#34;groupBy&#34; :headers=&#34;headers&#34; :items=&#34;items&#34; item-value=&#34;name&#34; class=&#34;elevation-0&#34;&gt; &lt;template #group-header=&#34;{ item, columns, toggleGroup, isGroupOpen }&#34;&gt; &lt;tr&gt; &lt;td :colspan=&#34;columns.length&#34;&gt; &lt;VBtn size=&#34;small&#34; variant=&#34;text&#34; :icon=&#34;isGroupOpen(item) ? &#39;$expand&#39; : &#39;$next&#39;&#34; @click=&#34;toggleGroup(item)&#34;&gt; &lt;/VBtn&gt; {{ item.value }} &lt;/td&gt; &lt;/tr&gt; &lt;/template&gt; &lt;/v-data-table&gt; &lt;/template&gt;</code></pre> </div> </div> <p></p> <p>这就是结果 <a href="https://i.stack.imgur.com/vmnkx.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3Ztbmt4LnBuZw==" alt="Result"/></a></p> <p>我想去掉标题中的“组”标题 并使组列表默认展开而不切换</p> <p><a href="https://i.stack.imgur.com/hod0R.jpg" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2hvZDBSLmpwZw==" alt="Expected Result"/></a></p> </question> <answer tick="false" vote="0"> <p><strong>从标题中删除“群组”。</strong></p> <p>有两种选择。两者都使用特殊的“数据表组”名称。</p> <p>选项 1：作为 headers 数组中的第一项包含在内。由于您没有指定标题，因此标题将为空字符串</p> <pre><code> headers: [ { key: &#39;data-table-group&#39; }, </code></pre> <p>选项 2：使用此标头的槽并返回空。</p> <pre><code>&lt;template v-slot:header.data-table-group=&#34;&#34;&gt;&lt;/template&gt; </code></pre> <p><strong>自动展开VDataTable组标题</strong></p> <p>您需要定义一个“正在加载”引用，在加载表数据时将其设置为 true，在加载后将其设置为 false。然后，您可以在组标头插槽中使用模板引用，如下所示</p> <pre><code> &lt;template v-slot:group-header=&#34;{ item, toggleGroup, isGroupOpen }&#34;&gt; &lt;template :ref=&#34;(el)=&gt;{ if (loading &amp;&amp; !isGroupOpen(item)) toggleGroup(item); }&#34;&gt;&lt;/template&gt; </code></pre> </answer> </body></html>

如何在我的组件上使用“vuetify”过渡？

我在我的项目中使用 Vuetifyjs 库。我想向我的组件添加过渡 - 但没有关于如何开始过渡的文档。 例如我想添加一些过渡到

什么是点菜组件？我应该使用它吗？

使用 vue-cli 启动新项目时，它会询问一些问题来自定义设置。一般是项目名称、描述、是否使用 eslint 进行 linting、karma 和 mocha 进行测试等。

如何使用 vue-router 和预定义模板

我在我的项目对象中添加了一个链接 项目： [ { icon: '仪表板' text: '首页', link: '/'}, { icon: '仪表板' text: '账户', link: '/account'}, ] 我应该把 router-link 组件放在哪里？

v-on="..." 语法在 VueJS 中意味着什么？

我遇到了 v-dialog 组件的 Vuetify 示例，该示例具有名为 activator 的作用域插槽，定义如下： 我遇到了 v-dialog 组件的 Vuetify 示例，它具有名为 activator 的作用域插槽，定义如下： <template v-slot:activator="{ on }"> <v-btn color="red lighten-2" dark v-on="on" > Click Me </v-btn> </template> 我从 VueJS 文档中了解作用域插槽的目的和解构插槽属性的概念，但我不明白v-on="on"在此示例中的含义。特别是当未使用 v-on 指令指定事件时，这意味着什么？ v-on上的VueJS文档仅显示其与明确指定的事件名称（例如v-on:click="..."）结合使用的用法，但没有解释仅将其用作v-on="..."。 有人可以解释一下这个语法及其在 Vuetify 示例中的用法吗？ TLDR： 基本用法 <!-- object syntax (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>] 所以基本上 @click="..." 等于 v-on:click="..." 等于 v-on="{click:...}" TLDR： vuetify 实现： genActivator () { const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), { on: this.genActivatorListeners(), attrs: this.genActivatorAttributes(), })) || [] this.activatorNode = node return node } 一些见解： 如果您想抽象组件并一次传递多个侦听器而不是编写多行赋值，那么它很有用。 考虑一个组件： export default { data() { return { on: { click: console.log, contextmenu: console.log }, value: "any key value pair" } } } <template> <div> <slot name="activator" :on="on" :otherSlotPropName="value" > <defaultComponent v-on="on" /> </slot> </div> </template> 鉴于上面的组件，您可以访问插槽属性并将它们传递到您的自定义组件中： <ExampleComponent> <template v-slot:activator="{ on, otherSlotPropName }"> <v-btn color="red lighten-2" dark v-on="on" > Click Me </v-btn> </template> <ExampleComponent /> 有时用纯 JavaScript 更容易看到它： 比较上面的组件 - 使用 渲染函数 而不是模板： export default { data() { return { on: { click: console.log, contextmenu: console.log }, value: "any key value pair" } }, render(h){ return h('div', [ this.$scopedSlots.activator && this.$scopedSlots.activator({ on: this.on, otherSlotPropName: this.value }) || h('defaultComponent', { listeners: this.on } ] } } 来源： 如果为空 v-on="eventsObject"，将调用方法 bindObjectListener，从而将事件分配给 data.on。 这发生在createComponent范围。 最后 listeners 作为 VNodeComponentOptions 传递并由 updateListeners 更新。 Vue 扩展的地方 - 检查的 Vuetify 实现： 当考虑到可以加入和扩展 vue 实例时，人们可以说服自己任何组件都可以简化为更原子的版本。 这就是 vuetify 在以下示例中使用的内容： v-dialog 组件，通过创建 activator mixin。 现在可以追踪由 on 安装的 activatable 的内容： const simplyfiedActivable = { mounted(){ this.activatorElement = this.getActivator() }, watch{ activatorElement(){ // if is el? this.addActivatorEvents() } }, methods: { addActivatorEvents(){ this.listeners = this.genActivatorListeners() }, genActivatorListeners(){ return { click: ..., mouseenter: ..., mouseleave: ..., } }, genActivator () { const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), { on: this.genActivatorListeners(), attrs: this.genActivatorAttributes(), })) || [] this.activatorNode = node return node }, } } 有了上面的代码片段，剩下的就是将其实现到实际组件中： // vuetify usage/implemention of mixins const baseMixins = mixins( Activatable, ...other ) const sympliefiedDialog = baseMixins.extend({ ...options, render(h){ const children = [] children.push(this.genActivator()) return h(root, ...options, children) } })

Nuxt vuetify 在 Nuxt.config.ts 中无法识别

我尝试安装 Nuxt vuetify 时出现新错误 安装与 npm install --save-dev @invictus.codes/nuxt-vuetify npm 安装 然后我将模块添加到 Nuxt.config.ts 导出默认定义NuxtC...

router-link 与 vue 和 vuetify 的混淆

如何使用预定义模板来使用 vue-router： https://vuetifyjs.com/examples/layouts/google-contacts 我在我的项目对象中添加了一个链接 项目： [{ icon: '仪表板' text: 'Hom...

想使用vuetify Snackbar作为vuejs中的全局自定义组件

我使用snackbar在vuejs中显示成功消息。我想制作一个全局自定义小吃栏组件。 我使用 Snackbar 在 vuejs 中显示成功消息。我想制作一个全局自定义小吃栏组件。 <template> <div name="snackbars"> <v-snackbar v-model="snackbar" :color="color" :timeout="timeout" :top="'top'" > {{ text }} <template v-slot:action="{ attrs }"> <v-btn dark text v-bind="attrs" @click="snackbar = false"> Close </v-btn> </template> </v-snackbar> </div> </template> <script> export default { props: { snackbar: { type: Boolean, required: true, }, color: { type: String, required: false, default: "success", }, timeout: { type: Number, required: false, default: 3000, }, text: { type: String, required: true, }, }, }; </script> 然后我将其作为组件导入到我的每个表单中，如下所示。 <SnackBar :snackbar="snackbar" :color="color" :text="text" /> 但我的问题是我不能使用 Snackbar 作为我的子组件中的道具。它向我显示了这个错误。 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "snackbar" 我该如何解决这个问题。谁能帮助我吗？ 我意识到这已经过时了，但是感谢谷歌，我将添加我的解决方案。 我使用这个，因为我不明白使用 vuex 作为小吃店有什么意义。这比需要的工作还要多。 创建一个名为vtoast的vue组件 <template> <v-snackbar :color="color" :timeout="timer" v-model="showSnackbar" bottom right > <v-icon left>{{icon}}</v-icon>{{message}} </v-snackbar> </template> <script> export default { name: "vtoast", data() { return{ showSnackbar: false, message: '', color: 'success', icon: 'mdi-check', timer: 3000 } }, methods:{ show(data) { this.message = data.message || 'missing "message".' this.color = data.color || 'success' this.timer = data.timer || 3000 this.icon = data.icon || 'mdi-check' this.showSnackbar = true } } } </script> 在主应用程序根目录的某个位置，添加以下内容。（我通常将其放在 App.vue 中） <template> ... <!-- toast --> <vtoast ref="vtoast"/> ... </template> <script> import vtoast from '@/your/vtoast/directory/vtoast' export default{ name: 'App', //or whatever your root is components:{ vtoast }, mounted() { this.$root.vtoast = this.$refs.vtoast }, } </script> 并像这样访问它... this.$root.vtoast.show() this.$root.vtoast.show({message: 'Ahoy there!'}) 我找到了一种使用 vuex 修复我的解决方案的方法。 <template> <div name="snackbars"> <v-snackbar v-model="show" :color="color" :timeout="timeout" :top="'top'"> {{ text }} <template v-slot:action="{ attrs }"> <v-btn dark text v-bind="attrs" @click="show = false"> Close </v-btn> </template> </v-snackbar> </div> </template> <script> export default { created() { this.$store.subscribe((mutation, state) => { if (mutation.type === "snackbar/SHOW_MESSAGE") { this.text = state.snackbar.text; this.color = state.snackbar.color; this.timeout = state.snackbar.timeout; this.show = true; } }); }, data() { return { show: false, color: "", text: "", timeout: 0, }; }, }; </script> 在我的 vuex 模块中我是这样写的 export default { namespaced: true, state: { text: "", color: "", timeout: "", }, mutations: { SHOW_MESSAGE(state, payload) { state.text = payload.text; state.color = payload.color; state.timeout = payload.timeout; }, }, actions: { showSnack({ commit }, payload) { commit("SHOW_MESSAGE", payload); }, }, }; 然后我将 Snackbar 子组件导入到我的父组件中并像这样发送数据。 ...mapActions("snackbar", ["showSnack"]), saveDetails() { this.showSnack({ text: "Successfully Saved!", color: "success", timeout: 3500, }); } 您可以使用 Vue 内置的 Provide/Inject API，并创建一个提供小吃栏数据的高阶组件： 创建提供商 <script setup> import { computed, provide, ref } from 'vue'; const show = ref(false) const message = ref('') const color = ref('') provide('snackbar', { show(options) { message.value = options.message color.value = options.color show.value = true }, hide() { show.value = false } }) </script> <template> <slot /> <v-snackbar v-model="show" :color="color"> {{ message }} <template #actions> <v-btn variant="text" @click="show = false">Close</v-btn> </template> </v-snackbar> </template> 使用 Provider 包装您的 App.vue 内容 <script setup lang="ts"> import SnackbarProvider from './components/SnackbarProvider.vue' </script> <template> <v-app> <SnackbarProvider> <v-main> <!-- Other --> </v-main> </SnackbarProvider> </v-app> </template> 在提供者内部的任何地方使用提供的数据： <script setup> import { inject } from 'vue'; const { show } = inject('snackbar') </script> <template> <v-btn @click="show({ message: 'Hello', color: 'success' })"> Show </v-btn> </template> 您还可以使用我的模块轻松创建对话框和小吃栏： https://vuetify-use-dialog.vercel.app https://vuetify-sonner.vercel.app 你有一个 prop 和数据中的相同。 从 data() 中删除小吃栏，因为它可以从 prop 中获得。 <script> export default { props: { snackbar: { type: Boolean, required: true, }, color: { type: String, required: false, default: "success", }, timeout: { type: Number, required: false, default: 3000, }, text: { type: String, required: true, }, } }; </script> 这就是我使用 Options API 所做的，仅使用道具和事件； 这是Snackbar.vue组件 <template> <div class="text-center"> <v-snackbar transition="true" bottom right v-model="show" :color="snackbar.color" :timeout="snackbar.timeout" class="snackbar-shadow" > <div class="d-flex align-start alert-notify"> <v-icon size="24" class="text-white mr-5">{{ snackbar.icon }}</v-icon> <p class="mb-0"> <span class="font-size-root font-weight-600">{{ snackbar.title }}</span> <br /> {{ snackbar.message }} </p> </div> <template v-slot:action="{ attrs }"> <v-btn icon elevation="0" max-width="136" :ripple="false" height="43" class="font-weight-600 text-capitalize py-3 px-6 rounded-sm" color="rgba(255,255,255, .85)" text v-bind="attrs" @click="show = false" > <v-icon size="13">fas fa-times</v-icon> </v-btn> </template> </v-snackbar> </div> </template> <script> export default { name: "snackbar", props: { snackbar: Object, }, computed: { show: { get() { return this.snackbar.visible; }, set(value) { this.$emit("closeSnackbar", value); }, }, }, }; </script> 这是App.vue组件 <template> <!-- Snackbar --> <snackbar :snackbar="snackbar" @closeSnackbar="SnackbarClose"></snackbar> </template> <script> export default { name: "app", data() { return { snackbar: { visible: false, timeout: 2000, color: "#11cdef", title: "Hello", message: null, icon: "fas fa-bell", }, }; }, created: { this.SnackbarShow(); } methods: { SnackbarShow() { this.snackbar.visible = true; this.snackbar.message = "Hola!👋 I'm a snackbar"; }, SnackbarClose() { this.snackbar.visible = false; }, }, }; </script>

vuejs 无效道具：道具“modelValue”的类型检查失败

我在 Laravel、Vue.js 和 Vuetify 应用程序中遇到 v-file-input 组件的类型不匹配错误。我正在尝试更新图像，但该组件需要一个文件数组

VueJs/Vuetify 条码阅读器如何将扫描值发送到当前聚焦的输入

我想将扫描的值发送到当前聚焦的输入字段。扫描仪放置在组件内部，该组件放置在路由器视图旁边的 App.vue 中，以便我始终可以访问

迭代 Vuetify v-data-table 中数据项的属性

假设我有一张这样的桌子： 假设我有这样的桌子： <template> <v-data-table :headers="headers" :items="items"> <template v-slot:item.red="{ item }"> <v-checkbox v-model="item.red"></v-checkbox> </template> <template v-slot:item.green="{ item }"> <v-checkbox v-model="item.green"></v-checkbox> </template> <template v-slot:item.blue="{ item }"> <v-checkbox v-model="item.blue"></v-checkbox> </template> </v-data-table> </template> <script setup lang="ts"> interface Header { title: string key: string } const headers: Header[] = [ { title: 'Red color', key: 'red' }, { title: 'Green color', key: 'green' }, { title: 'Blue color', key: 'blue' }, ] const items = [ { red: true, green: false, blue: true, }, ]; </script> 看起来像这样： 我想避免手动定义每个列模板（红色、绿色、蓝色）。像这样的东西： <template> <v-data-table :headers="headers" :items="items"> <template v-for="<propName in item>" v-slot:item.<propName>="{ item }"> <v-checkbox v-model="item.<propName>"></v-checkbox> </template> </v-data-table> </template> 如何让它真正发挥作用？ 你的意思是这样的： <template> <v-data-table :headers="headers" :items="items"> <template v-for="header in headers" v-slot:[`item.${header.key}`]="{ item }"> <v-checkbox v-model="item[header.key]"></v-checkbox> </template> </v-data-table> </template> 如果这就是您正在寻找的内容，如果需要，我可以更详细地解释它。

[Vue warn]：v-on 的 .native 修饰符仅在组件上有效，但它被用于 <div>

我正在使用 Vuetify 的日历组件，它正确显示数据，但是我在控制台中收到该警告，这有点烦人，我不知道出了什么问题，因为大部分代码都是 c...

使用 Django REST API + VUE 的 RAG 项目聊天机器人

我正处于开发聊天机器人的规划阶段，该机器人利用我自己的业务数据利用检索器增强生成（RAG）。聊天机器人旨在根据

Vuetify - CSS 在组件内不起作用（生效）

案例1 我们正在尝试将自定义样式应用于渲染的 vuetify 元素： <question vote="45"> <p><strong>案例1</strong><br/> 我们正在尝试将自定义样式应用于渲染的 vuetify 元素：</p> <pre><code>&lt;template&gt; &lt;v-text-field v-model=&#34;name&#34; label=&#34;Name&#34; /&gt; &lt;/template&gt; &lt;style scoped&gt; .input-group__input { background: red; } &lt;/style&gt; </code></pre> <p>但没有任何变化。</p> <hr/> **案例2** 我们正在尝试设置由“v-html”渲染的元素的样式（例如外部 html）。例如，我们尝试在“img”上应用自定义宽度和高度，但它不起作用： <pre><code>&lt;template&gt; &lt;div v-html=&#34;customHTML&#34;&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data: () =&gt; ({ customHTML: `&lt;img src=&#34;https://vuetifyjs.com/static/doc-images/carousel/planet.jpg&#34;&gt;`; }) } &lt;/script&gt; &lt;style scoped&gt; img { width: 200px; height: 200px; } &lt;/style&gt; </code></pre> <p>如何将自定义 CSS 应用于这些元素？</p> </question> <answer tick="true" vote="132"> <p><strong>注意</strong>：确保按照<a href="https://vuetifyjs.com/en/getting-started/quick-start#existing-applications" rel="noreferrer">docs</a><br/>包含样式 另外，如果组件损坏，请确保您的应用程序包含在 <pre><code>v-app</code></pre> 标签内：</p> <pre><code>&lt;v-app&gt; &lt;v-content&gt; //.. &lt;/v-content&gt; &lt;/v-app&gt; </code></pre> <p><a href="https://vuetifyjs.com/en/layout/pre-defined" rel="noreferrer">文档说</a>：</p> <blockquote> <p>为了使您的应用程序正常工作，您必须将其包装在 <pre><code>v-app</code></pre> 组件。 </p> </blockquote> <hr/> <h1>解决方案</h1> <p>使用<pre><code>vue-loader</code></pre>的<a href="https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors" rel="noreferrer">深度选择器</a><pre><code>&gt;&gt;&gt;</code></pre>，如下所示：</p> <p>案例1：</p> <pre><code>&gt;&gt;&gt;.input-group__input { background: red; } </code></pre> <p>案例2：</p> <pre><code>&gt;&gt;&gt;img { width: 200px; height: 200px; } </code></pre> <p>因此无需从 <pre><code>scoped</code></pre> 标签中删除 <pre><code>&lt;style&gt;</code></pre> 属性。 </p> <p>摘自<a href="https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors" rel="noreferrer">docs</a>有关预处理器的内容（例如，如果您使用<pre><code>&lt;style lang=&#34;scss&#34; scoped&gt;</code></pre>）：</p> <blockquote> <p>某些预处理器，例如 Sass，可能无法正确解析 <pre><code>&gt;&gt;&gt;</code></pre>。在这些情况下，您可以使用 <pre><code>/deep/</code></pre> 组合器 - 它是 <pre><code>&gt;&gt;&gt;</code></pre> 的别名，并且工作原理完全相同。</p> </blockquote> <p><strong>注意</strong>：深度选择器是在 <a href="https://github.com/vuejs/vue-loader/releases/tag/v12.2.0" rel="noreferrer"><code>v12.2.0</code><pre></pre></a> 中实现的 </p>说明<h2> </h2>在这两种情况下，CSS 更改都不会生效，因为您尝试设置样式的元素不是组件的一部分，因此没有 <p><code>data-v-xxxxxxx</code><pre> 属性，该属性用于在使用时对当前范围（组件）中的元素进行样式设置</pre><code>&lt;style scoped&gt;</code><pre>。</pre> 当使用 <br/><code>scoped</code><pre> 属性时，我们告诉 vue 仅将 css 应用到具有 </pre><code>data-v-xxxxxxx</code><pre> 的元素，但不应用于嵌套</pre> 元素。因此我们需要显式地使用深度选择器。<strong> </strong>例如，如果 </p><code>#1</code><p> 渲染 <pre><code>&lt;v-text-field&gt;</code></pre> 看起来像这样： <pre> </pre><code>// notice `data-v-61b4012e` here: &lt;div data-v-61b4012e class=&#34;input-group input-group--text-field primary--text&#34;&gt; &lt;label&gt;Name&lt;/label&gt; &lt;div class=&#34;input-group__input&#34;&gt; // and notice no `data-v-61b4012e` here &lt;input tabindex=&#34;0&#34; aria-label=&#34;Name&#34; type=&#34;text&#34;&gt; &lt;/div&gt; &lt;div class=&#34;input-group__details&#34;&gt;&lt;/div&gt; &lt;/div&gt; </code></p> <pre>如果 </pre><code>#2</code><p> 渲染 <pre><code>v-html</code></pre> 看起来像这样：<pre> </pre><code>&lt;div data-v-61b4012e&gt; // notice `data-v-61b4012e` here // and no `data-v-61b4012e` on image &lt;img src=&#34;https://vuetifyjs.com/static/doc-images/carousel/planet.jpg&#34;&gt; &lt;/div&gt; </code></p> <pre>还没有工作？</pre> <h3>如果您尝试覆盖某些样式（内联样式）并且此解决方案不起作用，您可能需要</h3>查看有关 CSS 特异性的更多信息<p>。<a href="https://stackoverflow.com/a/51728504/1981247"> </a> </p><hr/>错误？<p><strong> 即使您正确定位并使用深度选择器，样式也可能不会按照您的预期应用。检查渲染的 html 中的父元素之一是否有对应的 data-v-xxxxxx 属性，如果未应用它，可能会出现情况（错误），因此无法通过作用域 css 来定位它。 </strong>一个例子是由 v-select 渲染的 v-menu<br/>，但将来可能会遇到其他类似的错误。<a href="https://github.com/vuetifyjs/vuetify/issues/5568" rel="noreferrer"> </a> </p></answer>

仅生产构建错误：Vuetify 无法找到目标数据应用程序

我只在生产版本中遇到此错误。 我已阅读此文档和此相关问题，但我仍然无法使其工作。 包裹在 v-dialog 周围，为什么它仍然很复杂...