How do I capture the values of the form in the console. currently am getting an empty object in the console.

<div >
      <v-form
            ref="form"
            
            v-model="valid"
           lazy-validation
                        >
                      
    <v-text-field
      v-model="email"
         :rules="emailRules"
         label="E-mail"
         outlined
       required></v-text-field>
      <v-text-field v-model="password"
        :counter="10"
         label="Password"
         required
        append-icon="mdi-map-marker"
        ></v-text-field>
        <v-btn
         :disabled="!valid"
         color="success"
          
       @click="submit" >Submit
           </v-btn>
   </v-form>
            </div>
        </template>
        
 

     <script>
          export default {
            data: () => ({
              form:{
                name: '',
                email: '',
                password: ''
              },
              valid: true,
              email: '',
              emailRules: [
                v => !!v || 'E-mail is required',
                v => /. @. \.. /.test(v) || 'E-mail must be valid',
              ],
            }),
        
            methods: {
              submit () {
                console.log(this.form)
              },
            },
          }
        </script>

I want to see the data of the form when you click the submit button

I want to get the form details name email and password.

what i get now is

{__ob__: Observer}email: ""name: ""password: ""__ob__: Observerdep: Dep {_pending: false, id: 246, subs: Array(0)}mock: falseshallow: falsevalue: {__ob__: Observer}vmCount: 0[[Prototype]]: Objectget email: ƒ reactiveGetter()length: 0name: "reactiveGetter"prototype: {constructor: ƒ}arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
  

CodePudding user response：

You should bind the form property fields to the inputs like v-model="form.name" and v-model="form.email" ..., and remove the other properties name,email and password :

   <v-text-field
              v-model="form.email"
              :rules="emailRules"
              label="E-mail"
              outlined
              required
            ></v-text-field>