vue.js v-on处理程序出错(承诺/异步):“引用错误:未定义表单”

pgvzfuti  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(124)

我试图从vuex向laravel提交一个表单,并向localStorage注册一个令牌。
在我的表单中,我有一个submit方法,它将数据发送到store,js actions。
该表单是一个注册表单,我能够捕捉到后端的详细信息。我也从后端验证获得反馈
比如说

{"success":true,"data":{"name":"saf,jdfn","token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzIiwianRpIjoiYjc2ZDgzNjUzNDg0ZDA4OGRiMjMyOTIxZjViNjc3YzlkN2Q0ZeMbU31lGkD8pirH1JtQr1ZKL1S6eYuscQUUhKOnFodEum3Z4G1gGyHJ27UK1KzjnL3M"},"message":"Yay! A user has been successfully created."}

我还希望将访问令牌存储到localStorage

<template lang="en">
    <div class="body">
           <div class="cont">
                <v-form
                  ref="form"
                  class="form sign-in"
                  v-model="valid"
                  lazy-validation
                >
                <v-text-field
                    v-model="form.name"
                    :counter="10"
                    outlined
                    :rules="nameRules"
                    label="Name"
                    required
                  ></v-text-field>
                 

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

                    <v-text-field
                    v-model="form.password"
                    outlined
                    type="password"
                    :rules="passRules"
                    label="Password"
                    required
                    append-icon="mdi-map-marker"
                  ></v-text-field>

                  <v-text-field
                    v-model="form.confirm_password"
                    outlined
                    type="password"
                    :rules="passRules"
                    label="confirm password"
                    required
                    append-icon="mdi-map-marker"
                  ></v-text-field>

                  <v-btn
                    :disabled="!valid"
                    color="success"
                    class="submit mr-8"
                    @click="submit"
                  >
                    Submit
                  </v-btn>
               </v-form>
             </div>
    </div>
       
    </div>
</template>

<script>
  export default {
    data: () => ({
      form:{
        name: '',
        email: '',
        password: '',
        confirm_password: ''
      },
      valid: true,
      name: '',
      nameRules: [
        v => !!v || 'Name is required',
        v => (v && v.length <= 10) || 'Name must be less than 10 characters',
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
      ],
      password: '',
      passRules: [
        v => !!v || 'Password is required',
        v => (v && v.length >=8 ) || 'Name must be atleast 8 characters',
      ],
    
    }),

    methods: {
    async  submit () {
      await this.$refs.form.validate();
      this.$store.dispatch('registerUser', this.form);
      },
    },
  }
</script>

在我的store.js中,我有以下代码

actions: {
        registerUser:(context, form) => {
            axios.post('/api/register', form)
            .then(
                res=> {
                    this.res = res.data;
                       if(res.data.token){
                             localStorage.setItem(
                        'token',
                          res.data.token
                    )
                  }
                }
               ) .catch(
                err => {
                  console.log(err)
                }
            )
            console.log(this.form)
        },

无法将令牌获取到本地存储

dxxyhpgq

dxxyhpgq1#

首先,我建议你看一下vuex和javascript作用域的主题,据我所知,你的问题是javascript作用域,你不需要使用vuex只是为了保存令牌到本地存储。

操作

actions: {
                registerUser: (context, form) => {
                    axios.post('/api/register', form)
                        .then(
                            res => {
                                const tokenRes = res.data;
                                if (tokenRes.data.token) {
                                    localStorage.setItem(
                                        'token',
                                        tokenRes.data.token
                                    )
                                }
                                // Here you cannot call a data object in the vue component. 
                                // If you are going to use it in the component, you need to save it in the state.
                                // console.log(this.form)

                                console.log(tokenRes)
                            }
                        ).catch(
                        err => {
                            console.log(err)
                        }
                    )
                },
            }

相关问题