vuetify.js 相关问题

Vuetify.js是Vue.js的语义材料组件框架2.将此标记用于特定于vuetify组件和api的问题。（如果可能，提供CodePen或JsFiddle重现您的问题）

了解我的意思的步骤：前往 vuetify 网站单击齿轮图标选择深色或浅色主题。当您在不同主题之间切换时，会播放动画。一个圆圈（从

css vue.js vuetify.js vuetifyjs3

回答 1 投票 0

这是我的组件上可清除属性的预期用途：在父组件上：这是我的组件上可清除属性的预期用途：在父组件上： <v-row> <v-col> <Selector :clearable="true"/> </v-col> </v-row> 在子组件中： <v-select :clearable="clearable"/> const props = defineProps({ clearable: { type: Boolean, default: false, }, }); 虽然我确实在组件上看到了清晰的图标，但控制台不断报告： [Vue warn]：无效的道具：道具“clearable”的类型检查失败。预期为布尔值，得到值为“true”的字符串。所以，我尝试直接在子组件中赋值： <v-select :clearable="true"/> <v-select :clearable="false"/>  但是遇到了同样的错误消息。看来我们只能使用这种方法来避免错误消息： <v-select clearable/> 但是，如何正确地将clearable作为道具从父组件传递到子组件？我相信我通过对父组件进行简单的调整解决了这个问题： <v-row> <v-col> <Selector :clearable="clearable"/> </v-col> </v-row> 可清除的定义为： const clearable = ref(true)

vuetify.js v-select

回答 1 投票 0

如何在 laravel 9 入门套件中安装 vuetify？

我正在尝试在我的 Laravel 9 项目中安装 Vuetify。我正在使用 Breeze Vue 入门套件。知道如何安装吗？需要直接安装到项目中吗，或者有什么方法可以制作...

laravel vue.js vuetify.js

回答 1 投票 0

Vuetify：如何从文本字段获取前缀的值

我的页面中有一个包含各种文本字段的表单，在其中一个字段上我放置了一个前缀，因为我希望输入的值始终以相同的 5 个字母开头。我能够从文本中获得我的价值...

vue.js vuetify.js

回答 1 投票 0

如何防止在 v-select 中将所选项目显示为列表

如何自定义 v-select 以保持标签不浮动并防止将所选项目显示为列表（不从隐藏选择的选项列表中删除项目）请找到...

vue.js vuetify.js

回答 1 投票 0

Vuetify 国际化

我正在使用 vuetify 的国际化，并且在使用 v-select 时我在浏览器上收到错误 [Vue warn]：Vuetify：在“en”中找不到翻译键“$vuetify.open”，正在尝试

vuejs3 internationalization vuetify.js

回答 1 投票 0

vuetify 中复选框列未排序

我正在尝试在 vuetify 数据表中创建一行复选框。我设法做到了这一点，但排序不适用于该列我创建了这个演示来演示。演示我正在使用arra...

vue.js vuejs3 vuetify.js

回答 1 投票 0

Vuetify：v-数据表标题（新线）

我正在使用 Vue.js(2.6.11) 和 Vuetify(2.4.0)。下面的代码是我的缩写代码。我正在使用 Vue.js(2.6.11) 和 Vuetify(2.4.0)。下面的代码是我的缩写代码。 <v-data-table :headers="headers" :items="items" :items-per-page="itemsPerPage" hide-default-footer class="elevation-1"></v-data-table> ============================================================= data() { return { page: 1, pageCount: 0, itemsPerPage: 10, headers: [ { text: 'Calories\n(per 100g)', align: 'center', sortable: false, value: 'calories' }, { text: 'Protein\n(per 100g)', align: 'center', sortable: false, value: 'protein' }, { text: 'Carbohydrates\n(per 100g)', align: 'center', sortable: false, value: 'carbohydrates' }, ], items: [], }; }, 我写（新行）在每个标题中，但它不起作用。有人知道如何让它发挥作用吗？重点是，如果不在 \n 标签中，<pre> 将显示为空白，所以只能用插槽 <v-data-table headers="headers" items="items" items-per-page="itemsPerPage" hide-default-footer class="elevation-1"> <template v-slot:header.calories="{ header }"> Calories<br>new line </template> </v-data-table> v-slot:header.calories 卡路里是您的标题字段之一

vue.js vuetify.js

回答 1 投票 0

如何减少V型开关的宽度

v 型开关似乎总是采用 100% 宽度，如下所示。有没有办法将其可点击区域减少到最小？谢谢！空白处可点击的 v-switch：https://vuetifyjs.com/en/components/

vue.js vuetify.js

回答 3 投票 0

如何使用 <script setup> 处的 Composition API 访问 VueJS 中的 Vuetify v-form ref？

。使用 v-form 的规则，我创建了一种验证用户输入的方法；然而，一旦表格是 </desc> <question vote="7">我正在使用 Vuetify 的 <p><code>v-form</code><pre> 在 Vue 中使用其 Composition API 和 </pre><code><script setup></code><pre> 创建一个表单。使用 </pre><code>v-form</code><pre> 的规则，我创建了一种验证用户输入的方法；但是，提交表单后，我需要清除表单的字段。当重置字段（使用空字符串）时，会触发表单规则并出现验证错误。我想访问 </pre><code>v-form</code><pre> 的内置功能（例如，</pre><code>clear()</code><pre>）；但是，我无法访问 </pre><code>this.$refs.form</code><pre> 中的 </pre><code><script setup></code><pre>。我如何访问这些功能或只是清除我的表单而不在提交后触发验证规则错误？</pre> </p>这是到目前为止的脚本部分：<p> </p><code><script setup lang="ts"> import { ref, Ref } from 'vue' import { Service } from '@/types/service' const service: Ref<Service> = ref({ name: '', endpoint: '' }) const loading = ref(false) const isValid = ref(true) const register = () => { loading.value = true isValid.value = false clear() setTimeout(() => { loading.value = false }, 2000) } const clear = () => { service.value = { name: '', endpoint: '' } } const serviceNameRules = [ (v: string) => !!v || 'Service name is required', (v: string) => v.length <= 20 || 'Service name must be less than 20 characters', ] const endpointRules = [ (v: string) => v.length <= 100 || 'Endpoint must be less than 100 characters', (v: string) => isURL(v) || 'Endpoint must have a valid URL format (i.e., "http://example.com")', ] const isURL = (str: string) => { try { const url = new URL(str) return url.protocol === 'http:' || url.protocol === 'https:' } catch (_) { return false } } </script> </code><pre> </pre>这是我的模板表格<p> </p><code><template> <v-card elevation="5"> <v-progress-linear v-if="loading" class="position-absolute" style="z-index: 1" color="#0062B8" height="10" indeterminate /> <v-card-title>Register New Service</v-card-title> <v-card-text> <v-form @submit.prevent="register()" v-model="isValid" ref="form" lazy-validation > <v-text-field v-model="service.name" label="Service Name" hint="e.g., 'service-pages'" :rules="serviceNameRules" required /> <v-text-field v-model="service.endpoint" label="Endpoint" hint="https://www.example.com/page" :rules="endpointRules" required /> <v-btn type="submit" color="#0062B8" style="color: white" :disabled="!isValid" > Register </v-btn> </v-form> </v-card-text> </v-card> </template> </code><pre> </pre> </question> <answer tick="true" vote="5">尝试在脚本中创建一个 <p><code>form</code><pre> 引用，该引用会自动绑定到 </pre><code>ref="form"</code><pre>:</pre> </p><code><script setup lang="ts"> import { ref, Ref } from 'vue' import { Service } from '@/types/service' const service: Ref<Service> = ref({ name: '', endpoint: '' }) const loading = ref(false) const isValid = ref(true) const form=ref<HTMLFormElement>(null) .... // then use it like if(form.value){ form.value.reset() } //or form.value?.reset() .... </code><pre> </pre> </answer> <answer tick="false" vote="0">由于问题具体是关于获取 Vuetify <p><code>VForm</code><pre> 组件的引用，因此正确的方法是：</pre> </p><code><template> <v-form ref="myForm">  </v-form> </template> <script setup lang="ts"> import { ref } from 'vue'; import { VForm } from 'vuetify/components'; const myForm = ref<InstanceType<typeof VForm> | null>(null); const myMethod = () => { // now you can call methods from the Vuetify API on the reference, e.g. myForm.value?.resetValidation(); }; </script> </code><pre> </pre> </answer></body>

typescript vue.js vuetify.js vuejs3 vuetifyjs3

回答 0 投票 0

仅在提交时验证 vuetify 文本字段

temp.vue 保存 temp.vue <v-form ref="entryForm" @submit.prevent="save"> <v-text-field label="Amount" :rules="numberRule"r></v-text-field> <v-btn type="submit">Save</v-btn> </v-form> <script> export default { data: () => ({ numberRule: [ v => !!v || 'Field is required', v => /^\d+$/.test(v) || 'Must be a number', ], }), methods: save () { if (this.$refs.entryForm.validate()){ //other codes } } } </script> 这里发生的情况是，在文本字段本身中输入内容时，规则就会被执行。我只想在提交时执行规则。如何在 vuetify 文本字段中做到这一点？ Vuetify rules 当输入获取值时执行，但是，如果您希望仅在表单提交上发生这种情况，则您已经重新修改了绑定到该输入的规则，最初，规则应该是一个空数组，当您单击按钮时，您可以根据需要动态添加/删除规则，就像在 codepen 中一样密码笔 <div id="app"> <v-app id="inspire"> <v-form ref="entryForm" @submit.prevent="submitHandler"> <v-container> <v-row> <v-col cols="12" md="6" > <v-text-field v-model="user.number" :rules="numberRules" label="Number" required ></v-text-field> </v-col> </v-row> <v-row> <v-btn type="submit" color="success">Submit</v-btn> </v-row> </v-container> </v-form> </v-app> </div> new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ valid: false, firstname: '', user: { number: '' }, numberRules: [] }), watch: { 'user.number' (val) { this.numberRules = [] } }, methods: { submitHandler () { this.numberRules = [ v => !!v || 'Field is required', v => /^\d+$/.test(v) || 'Must be a number', ] let self = this setTimeout(function () { if (self.$refs.entryForm.validate()){ //other codes alert('submitted') } }) } } }) 如果您像我一样，只是想阻止在每次击键时运行验证，请在文本字段上应用 validate-on-blur 属性，现在只有在用户完成输入整个输入后才会执行验证。所以这不是OP的确切答案，但我认为这是我们大多数人想要实现的目标。该道具已记录在here。 2024 年更新 Vuetify 3 引入了 validate-on 属性，该属性接受包括 blur 在内的多个值，因此 Vuetify 3 用户的正确语法是 validate-on="blur"。谢谢@epeleg。我有另一种方法可以在不设置观察者的情况下解决这个问题： <v-form lazy-validation v-model="valid" ref="form"> <v-text-field class="w-100" light label="Nome" v-model="form.nome" :rules="[rules.required]" rounded required outlined hide-details="auto" ></v-text-field> <v-btn rounded height="50" width="200" :disabled="!valid" :loading="isLoading" class="bg-btn-secondary-gradient text-h6 white--text" @click="submitContactForm()" > Enviar </v-btn> </v-form> vuetify 上有一个名为“lazy-validation”的道具，您可以在文档中看到：https://vuetifyjs.com/en/api/v-form/#functions 因此，v-form 有一个可以通过 $refs 查看的方法，称为 validate()，它可以根据您的表单规则返回 true 或 false。并且，在提交时触发验证的函数将如下所示： submitContactForm() { const isValid = this.$refs.form.validate(); if (isValid) { alert("Obrigado pelo contato, sua mensagem foi enviada com sucesso!"); this.form = { nome: "", celular: "", email: "", mensagem: "" }; this.$refs.form.resetValidation(); // Note that v-form also has another function called resetValidation(), so after we empty our fields, it won't show the validation errors again. } },

vue.js vuejs2 vuetify.js

回答 3 投票 0

在Vue中直接更改v-model时，屏幕上Vuetify组件中的值不会刷新

在我的示例 Vue 组件中（我使用的是 Vue 2 和 Vuetify 1），我有一个输入字段，用户可以在其中输入数据，但我希望能够以编程方式将输入字段中的数据更改为所需的数据

javascript vue.js vuetify.js

回答 1 投票 0

RangeError：超出最大调用堆栈大小”同时使用 vuelidate 和 vuetify

我在我的 vue typescript 项目中设置了 vuelidate，如下所示主要.ts 从“vuelidate”导入 Vuelidate； Vue.use(Vuelidate); Vue.config.生产提示 = false; 新的Vue（{ 路由器，店铺，

vue.js vuejs2 vuetify.js vuelidate

回答 1 投票 0

可扩展面板中的自定义图标在 Vuetify 3 中无法按预期工作

问题陈述：手动展开/折叠面板时，自定义向下和向上箭头图标无法按预期工作。要求：由于 Vuetify 在可扩展的末尾提供了默认的箭头图标-