Jianghu Digital Platform
Login

Component.Form Forms and Controls

12003

Using Vuetify.js form components, Learn more about Vuetify.js V2

Form Components

v-text-field: Single-line Text Input

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Student Name</span>
        <v-text-field v-model="studentName" class="jh-v-input" dense single-line filled></v-text-field>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            studentName: 'Xiao Ming',
        }),
    })
</script>

v-form: Form Validation

<jh-toast />
<jh-mask />
<jh-confirm-dialog />
<v-app>
    <v-form ref="createForm" lazy-validation>
        <v-row no-gutters>
            <span class="text-h7 font-weight-bold pa-4 pl-0">Form Components</span>
        </v-row>
        <v-divider class="jh-divider"></v-divider>
        <v-row>
            <v-col cols="12" sm="12" md="4">
                <span class="jh-input-label">Student Name</span>
                <v-text-field v-model="studentName" :rules="validationRules.studentName" class="jh-v-input" dense single-line filled></v-text-field>
            </v-col>
        </v-row>
        <v-row class="justify-end mx-0 my-8 px-4">
            <v-btn color="success" small @click="doUiAction('createStudent')">Save</v-btn>
        </v-row>
    </v-form>
</v-app>
<script type="module">
  new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: () => ({
      validationRules: {
        studentName: [
            v => !!v || 'Student name is required',
            v => (v && v.length >= 2) || 'Student name must be at least 2 characters',
        ],
      },
      studentName: 'Zhang',
    }),
    async created() {
    },
    mounted() {
    },
    methods: {
      async doUiAction(uiActionId, uiActionData) {
        switch (uiActionId) {
          case 'createStudent':
            await this.prepareCreateValidate();
            await this.confirmCreateItemDialog();
            await this.doCreateStudent();
            break;
          default:
            console.error("[doUiAction] uiActionId not found", { uiActionId });
            break;
        }
      },
      async prepareCreateValidate() {
        if (await this.$refs.createForm.validate()) {
          return true;
        }
        throw new Error("Please complete the form information")
      },
      async confirmCreateItemDialog() {
        if (await window.confirmDialog({title: "Add New", content: "Are you sure you want to add?"}) === false) {
          throw new Error("[confirmCreateFormDialog] No");
        }
      },
      async doCreateStudent() {
        window.vtoast.success("Saved")
      },
    }
  })
</script>

v-textarea: Multi-line Text Input

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Comment</span>
        <v-textarea v-model="comment" rows="3" class="jh-v-input" dense single-line filled></v-textarea>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            comment: 'Comment content...',
        }),
    })
</script>

v-select: Dropdown Select

<v-app>
     <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Select Province</span>
        <v-select v-model="selectedState" :items="provinceList" class="jh-v-input" dense single-line filled></v-select>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            selectedState: 'Sichuan Province',
            provinceList: ['Sichuan Province', 'Hubei Province', 'Hunan Province', 'Yunnan Province', 'Shandong Province', 'Zhejiang Province', 'Jiangsu Province']
        }),
    })
</script>

v-autocomplete: Autocomplete Input

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Fruit Search</span>
        <v-autocomplete v-model="selectedItem" :items="items" hint="Start typing..." persistent-hint class="jh-v-input" dense single-line filled></v-autocomplete>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            selectedItem: null,
            items: ['Apple', 'Banana', 'Orange', 'Strawberry', 'Grape'],
        }),
    })
</script>

v-checkbox: Checkbox

<v-app>
    <v-col cols="12" sm="12" md="4">
        <v-checkbox v-model="termsAccepted" label="Agree to Terms" class="jh-v-input" dense single-line filled></v-checkbox>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            termsAccepted: false,
        }),
    })
</script>

v-radio-group: Radio Button Group

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Select Season</span>
        <v-radio-group v-model="favSeason" class="jh-v-input" dense single-line filled>
            <v-radio value="Spring" label="Spring" class="jh-v-input"/>
            <v-radio value="Summer" label="Summer" class="jh-v-input"/>
            <v-radio value="Autumn" label="Autumn" class="jh-v-input"/>
            <v-radio value="Winter" label="Winter" class="jh-v-input"/>
        </v-radio-group>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            favSeason: 'Summer',
        }),
    })
</script>

v-switch: Switch Component

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Switch</span>
        <v-switch v-model="switchEnable" class="jh-v-input" dense single-line filled></v-switch>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            switchEnable: true,
        }),
    })
</script>

v-slider: Slider

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Volume</span>
        <v-slider v-model="volume" max="100" thumb-label class="jh-v-input" dense single-line filled></v-slider>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            volume: 50,
        }),
    })
</script>

v-range-slider: Range Slider

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Price Range</span>
        <v-range-slider v-model="rangeValues" min="0" max="100" class="jh-v-input" dense single-line filled></v-range-slider>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            rangeValues: [0, 100],
        }),
    })
</script>

v-rating: Rating Component

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Rating</span>
        <v-rating v-model="rating" :readonly="false" color="yellow darken-3" background-color="grey darken-1" class="jh-v-input" dense single-line filled></v-rating>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            rating: 3,
        }),
    })
</script>

v-file-input: File Upload

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">Upload File</span>
        <v-file-input v-model="file" class="jh-v-input" dense filled single-line chips label="Please select a file"></v-file-input>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            file: null,
        }),
    })
</script>