Vuetify Tab component Form validation issue

1 year ago

#386631

wintersa

I have a form implemented in a tab component on my site. The form element in the 2nd tab is not activated. Form validation works not correctly.

To reproduce the issue I made a jsfiddle https://jsfiddle.net/arwinters/mpfjLxy1/64/

And also added the solution below. If you not manually activate the 2nd tab, the form validation thinks everything is ok and allow you to add the value of 1st tab. How can i activate the 2nd tab also? So the form validation works for both tabs.

Stackoverflow code snippet works but you have to open the full page to see the textboxes. You can also checkout my jsfiddle

Vue.use(Vuetify);

Vue.component('person-table', {
  template: `<div>
  <v-simple-table>
    <template v-slot:default>
      <thead>
        <tr>
          <th class="text-left">
            Firstname
          </th>
          <th class="text-left">
            Lastname
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
        >
          <td>{{ form.firstname}}</td>
          <td>{{ form.lastname}}</td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
  </div>`,
  props: {
    form: {
    }
  }
})

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      form: {
        firstname: '',
        lastname: ''
      },
      rules: [v => !!v || "Required"],
      showTable: false
    }
  },
  methods: {
    addPerson() {
      const validated = this.$refs.form.validate()
      console.log("Form validated: ", validated)
      
      if(validated) {
        console.log(this.form)
        this.showTable = true        
      }
    }
  },
  computed: {
  },
});

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
  <body>
  <div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-form ref=form>
        <v-tabs>
          <v-tab>Person 1</v-tab>
             <v-tab-item>
               <v-text-field
                 v-model="form.firstname"               
                 color="blue darken-2"
                 label="Firstname"                     
                 :rules="rules"                 
               ></v-text-field>
             </v-tab-item>
          <v-tab>Person 2</v-tab>
             <v-tab-item>
               <v-text-field                                 
                 v-model="form.lastname"                              
                 color="blue darken-2"
                 label="Lastname"
                 :rules="rules"
              ></v-text-field>
             </v-tab-item>            
        </v-tabs>
        </v-form>
        <v-btn @click="addPerson">Add</v-btn>
        <br />
        <br />            
        <person-table v-if="showTable" :form="form" />

      </v-container>
    </v-main>
  </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>  
  </body>
</html>

javascript

vue.js

vuetify.js

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs