關(guān)于VUE怎么在不同方法里傳值？

<script>
  import http from '../../assets/js/http'
  import '../../assets/css/login.css'
  import '../../assets/js/gt.js'

  export default {
    data() {
      return {
        formdata:{},    //增加
      }
    },
    methods: {
      handler:function(captchaObj){
        captchaObj.onReady(function () {
            // $("#wait").hide();
        }).onSuccess(function () {
          var result = captchaObj.getValidate();
          if (!result) {
            return alert('請完成驗證');
          }
          console.log(this.formdata)  //控制臺打印出來undefined
        })
        this.handleSubmit2 = function(){
            if (this.loading) return
            this.$refs.form.validate((valid) => {
            if (valid) {
              this.loading = !this.loading
              let data = {}    
              data.username = this.form.username    
              data.password = this.form.password   
              if (this.checked) {
                data.isRemember = 1   
              } else {
                data.isRemember = 0    
              }
              this.formdata = data    
              captchaObj.verify()    //增加
            } else {
              return false
            }
          })
          }
      },
      handleSubmit2(){
      },
    },
  }
</script>

在用VUE登陸整合極驗證的時候出現(xiàn)傳值的問題，極驗證的product為bind，也就是隱藏按鈕，點擊登陸的時候彈出極驗證，但了極驗證官網(wǎng)的web代碼，上面代碼也能正確驗證，但是怎么把this.handleSubmit2下面定義的data數(shù)據(jù)，傳進(jìn)上面的captchaObj.onSuccess里面？或者有沒有別的辦法讓captchaObj.onSuccess獲取到data？

回答

編輯回答

笨小蛋

定義data放在外面，但是你的handleSubmit2在哪里調(diào)用了？

2018年1月3日 13:17

編輯回答

菊外人

把數(shù)據(jù)存放到

data() {
    return {
        obj: {}
    }
},

調(diào)用的時候使用this.obj，就可以在所有方法里使用了

2017年2月2日 16:52

編輯回答

檸檬藍(lán)

自己解決了。

<template>
    <div class="auth">
        <el-form :model="form" :rules="rules2" ref="form">
            <div class="panfish">
                <img :src="imgurl" :class="topimg"/>
            </div>
            <div class="panel">
                <h1 class="title">Sign IN</h1>
                <div class="input-group">
                    <div class="input-box">
                        <el-form-item prop="username">
                            <el-input type="text" v-model="form.username" auto-complete="off" placeholder="請輸入賬號" @focus="username()" @blur="none()"></el-input>
                        </el-form-item>
                    </div>
                    <div class="input-box">
                        <el-form-item prop="password">
                            <el-input type="password" v-model="form.password" auto-complete="off" placeholder="請輸入密碼" @focus="password()" @blur="none()"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-button type="primary" class="btn" v-loading="loading" @click.native.prevent="handleSubmit2('form')">登錄</el-button>
            </div>
        </el-form>
    </div>
</template>
<style scoped>
  @import url('../../assets/css/login.css');
</style>

<script>
  import http from '../../assets/js/http'
  import '../../assets/js/gt.js'

  export default {
    data() {
      return {
        imgurl:"http://gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png",
        topimg:"normal",
        loading: false,
        form: {
          username: '',
          password: '',
        },
        requireVerify: false,
        rules2: {
          username: [
            { required: true, message: '請輸入賬號', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '請輸入密碼', trigger: 'blur' }
          ],
        },
        checked: false
      }
    },
    methods: {
      username:function(){
        this.imgurl="http://gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png";
        this.topimg="greeting";
      },
      password:function(){
        this.imgurl="http://gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png";
        this.topimg="blindfold";
      },
      none:function(){
        this.imgurl="http://gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png";
        this.topimg="normal";
      },
      handler:function(captchaObj){
        var formdata
        var _self = this
        this.handleSubmit2 = function(){
          if (this.loading) return
          this.$refs.form.validate((valid) => {
            if (valid) {
              let data = {}
              data.username = this.form.username
              data.password = this.form.password
              if (this.checked) {
                data.isRemember = 1
              } else {
                data.isRemember = 0
              }
              formdata = data
              captchaObj.verify()
            } else {
              return false
            }
          })
        }
        captchaObj.onReady(function () {
            // $("#wait").hide();
        }).onSuccess(function () {
          var result = captchaObj.getValidate();
          if (!result) {
            return alert('請完成驗證');
          }
          _self.apiPost('admin/base/login', formdata).then((res) => {
            if (res.code != 200) {
              _self.handleError(res)
            } else {
              _self.loading = !this.loading
              _self.resetCommonData(res.data)
              _g.toastMsg('success', '登錄成功')
            }
          })
        })
      },
    },
    created() {
      this.apiGet('admin/base/startcaptcha'+ '?t=' + (new Date()).getTime()).then((res) => {
        initGeetest({gt: res.gt,challenge: res.challenge,offline: !res.success,new_captcha: res.new_captcha,product: "bind",width: "300px"}, this.handler);
      })
    },
    mounted() {
      window.addEventListener('keyup', (e) => {
        if (e.keyCode === 13) {
          this.handleSubmit2('form')
        }
      })
    },
    mixins: [http]
  }
</script>

2017年3月14日 08:33