مدیریت فرم‌ها و ورودی‌ها در Vue.js | آموزش Form Handling با مثال کاربردی

< div id = " app " >
  < input type = " text " v-model = " name " >
  < p > Welcome, { { name } } ! < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        name : ' '
      } ;
    }
  } ) ;

< div id = " app " >
  < input type = " text " v-model = " textValue " placeholder = " Enter text " >

  < input type = " checkbox " v-model = " isChecked " > Accept terms

  < input type = " radio " v-model = " picked " value = " Option A " > Option A
  < input type = " radio " v-model = " picked " value = " Option B " > Option B

  < select v-model = " selected " >
    < option disabled value = " " > Please select one < / option >
    < option > A < / option >
    < option > B < / option >
    < option > C < / option >
  < / select >

  < p > Text: { { textValue } } < / p >
  < p > Accepted: { { isChecked } } < / p >
  < p > Picked: { { picked } } < / p >
  < p > Selected: { { selected } } < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        textValue : ' ',
        isChecked : false ,
        picked : ' ',
        selected : ' '
      } ;
    }
  } ) ;

< div id = " app " >
  < form @submit.prevent = " handleSubmit " >
    < input type = " text " v-model = " username " placeholder = " Username " >
    < span v-if = " username.length < 3 " > Username must be at least 3 characters < / span >

    < input type = " password " v-model = " password " placeholder = " Password " >
    < span v-if = " password.length < 6 " > Password must be at least 6 characters < / span >

    < button type = " submit " :disabled = " !isFormValid " > Submit < / button >
  < / form >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        username : ' ' ,
        password : ' '
      } ;
    } ,
    computed : {
      isFormValid ( ) {
        return this.username.length >= 3 && this.password.length >= 6 ;
      }
    } ,
    methods : {
      handleSubmit ( ) {
        alert ( ' Form submitted! ' ) ;
      }
    }
  } ) ;

< div id = " app " >
  < form @submit.prevent = " handleSubmit " >
    < label for = " name " > Name: < / label >
    < input type = " text " v-model = " form.name " id = " name " >

    < label for = " email " > Email: < / label >
    < input type = " email" v-model = " form.email " id = " email " >

    < label for = " age " > Age: < / label >
    < input type = " number " v-model = " form.age " id = " age " >

    < button type = " submit " > Submit < / button >
  < / form >
  < p > { { form } } < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        form : {
          name : ' ' ,
          email : ' ' ,
          age : null
        }
      } ;
    } ,
    methods : {
      handleSubmit ( ) {
        console.log ( this.form ) ;
        alert ( ' Form submitted! ' ) ;
      }
    }
  } ) ;

methods : {
  handleSubmit ( ) {
    alert ( ' Form submitted! ' ) ;
    this.resetForm ( ) ;
  } ,
  resetForm ( ) {
    this.form.name = ' ' ;
    this.form.email = ' ' ;
    this.form.age = null ;
  }
}

 < input type = " text " v-model.lazy = " username " >