when i used vuetify(2.4.3) with vuejs(2.6.11) and vuetify-loader(1.7.0). everything is fine, but the v-text-field, v-select components cannot display, when i create a page with form. this is my code(no any error):
<template>
<v-form
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="name"
:counter="10"
:rules="nameRules"
label="Name"
required
></v-text-field>
<v-text-field
v-model="email"
:rules="emailRules"
label="E-mail"
required
></v-text-field>
<v-select
v-model="select"
:items="items"
:rules="[v => !!v || 'Item is required']"
label="Item"
required
></v-select>
<v-checkbox
v-model="checkbox"
:rules="[v => !!v || 'You must agree to continue!']"
label="Do you agree?"
required
></v-checkbox>
<v-btn
:disabled="!valid"
color="success"
class="mr-4"
@click="validate"
>
Validate
</v-btn>
<v-btn
color="error"
class="mr-4"
@click="reset"
>
Reset Form
</v-btn>
<v-btn
color="warning"
@click="resetValidation"
>
Reset Validation
</v-btn>
</v-form>
</template>
<script>
export default {
data: () => ({
valid: true,
name: '',
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters',
],
email: '',
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
],
select: null,
items: [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
],
checkbox: false,
}),
methods: {
validate () {
this.$refs.form.validate()
},
reset () {
this.$refs.form.reset()
},
resetValidation () {
this.$refs.form.resetValidation()
},
},
}
</script>this is the source of the page: the v-text-field v-select ... only display a 'div' tag like this:
<form data-v-b5dd6ec2="" novalidate="novalidate" class="v-form">
<div><!----></div>
<div><!----></div>
<div><!----></div>
<div><!----></div>
<button type="button" class="mr-4 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default success">
<span class="v-btn__content"> Validate </span>
</button>
<button type="button" class="mr-4 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default error">
<span class="v-btn__content"> Reset Form </span>
</button>
<button type="button" class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default warning">
<span class="v-btn__content"> Reset Validation </span>
</button>
</form>this is the source of the page
how can i use v-form and v-text-field v-select ... correctly？ other components work fine in my project, except the form elements, can anybody help me?
