Ошибка в обработчике v-on (Promise/async): «ReferenceError: форма не определена»

Я пытаюсь отправить форму из vuex в laravel, а также зарегистрировать токен в локальном хранилище.

В моей форме у меня есть метод отправки, который отправляет данные в хранилище, действия js.

Форма представляет собой регистрационную форму, и я могу зафиксировать детали в бэкэнде. Я также получаю обратную связь от проверки бэкэнда

Например

 {"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)
        },

Не могу получить токен в локальном хранилище

Не существует переменной с именем форма. Можете ли вы поделиться всем кодом vue?

bariskau 19.11.2022 11:48

Ошибка не воспроизводится. В коде, который вы разместили, есть переменная

Estus Flask 19.11.2022 13:35
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
0
2
102
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Прежде всего, я предлагаю вам взглянуть на темы 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)
                        }
                    )
                },
            }

Другие вопросы по теме