フォームから Vue ElementUI を使用してログイン効果を実装する例

<el-フォーム
      ラベル位置="上"
      ラベル幅="100px" クラス="demo-ruleForm"
      :rules='ルール'
      :model='ルールフォーム'
      ステータスアイコン
      ref='ルールフォーム'
    >
        <el-form-item label="ユーザー名" prop="名前">
            <el-input type="text" v-model="rulesForm.name"></el-input>
        </el-form-item>
 
        <el-form-item label="パスワード" prop="パスワード">
            <el-input type="password" v-model="rulesForm.password"></el-input>
        </el-form-item>
 
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">送信</el-button>
            <el-button>リセット</el-button>
        </el-form-item>
    </el-form>

メソッド: {
    送信フォーム(送信者名){
      this.$refs[fromName].validate((valid)=>{
          if(有効){
            //チェックに合格したら、ユーザー名とパスワードをバックエンドに送信します login({
              名前:this.rulesForm.name、
              パスワード:this.rulesForm.password
            }).then((データ)=>{
              if(データコード==0){
                localStorage.setItem('トークン',data.data.token)
                ウィンドウの場所.href='/'
              }
              if(データコード==1){
                this.$message.error(データ.メッセージ)
              }
            })
          }それ以外{
            console.log('送信エラー!!')
            偽を返す
          }
      })
    }
  }