I have a form that links VueJS to a Strapi CMS database. The long and short of it is that if I enter an organization that doesn't exist, it should allow me to create the organization and enter the EIN for it. Everything works right up until I hit submit.

The JSON data shows it pulls in the Organization name. But once I get to the EIN field, it's like the Organization name gets removed back to the argument then the EIN doesn't get pulled in. Below is relevant code if anyone can possibly spot any mistakes/issues that are causing the problem.

The error I get is:

Error in v-on handler (Promise/async): "ReferenceError: result is not defined"

I'm only sharing specific parts of the code since it would need the whole project to run, anyways.

Thank you!

VUE:

<v-col cols="12">
                        <v-autocomplete
                          v-if="!newOrg"
                          v-model="registration.organization"
                          :items="foundOrgs"
                          :loading="loading"
                          :search-input.sync="searchOrgs"
                          cache-items
                          eager
                          outlined
                          dense
                          :disabled="sending"
                          item-text="name"
                          item-value="id"
                          label="Organization Name"
                          placeholder="Start typing to Search"
                          autocomplete="off"
                        >
                          <template v-slot:no-data>
                            <v-list-item v-if="!loading">
                              <v-list-item-title>
                                Organization not found.
                                <a @click="addNewOrg">Click Here</a>
                                to add it
                              </v-list-item-title>
                            </v-list-item>
                          </template>
                        </v-autocomplete>
                        <v-text-field
                          v-if="newOrg"
                          label="Organization"
                          name="organization"
                          type="text"
                          outlined
                          dense
                          :disabled="sending"
                          v-validate.disable="'required'"
                          :error-messages="errors.collect('Organization')"
                          data-vv-name="Organization"
                          required
                          v-model="registration.organization.name"
                        ></v-text-field>
                        <v-text-field
                          v-if="newOrg"
                          label="EIN"
                          name="EIN"
                          type="text"
                          outlined
                          dense
                          :disabled="sending"
                          v-validate.disable="'required'"
                          :error-messages="errors.collect('EIN')"
                          data-vv-name="EIN"
                          required
                          v-model="registration.organization.ein"
                        ></v-text-field>

                        <v-btn
                          :disabled="sending"
                          type="submit"
                          :loading="sending"
                          class="main-btn"
                          >Sign Up</v-btn
                        >

SCRIPT:

export default {
  name: "Registration",
  data() {
    return {
      registration: {
        firstName: "",
        lastName: "",
        email: "",
        password: "",
        organization: {
          name: "",
          ein: "",
        },
      },
      loading: false,
      newOrg: false,
      foundOrgs: [],
      searchOrgs: null,
      sending: false,
      logo: logo,
    };
  },
  watch: {
    searchOrgs(val) {
      val = val.trim();
      if (!val) {
        this.foundOrgs = [];
        return;
      }
      this.loading = true;
      Vue.$organizationService.autocomplete(val).then((orgs) => {
        this.foundOrgs = orgs;
        this.loading = false;
      });
    },
  },
  methods: {
    addNewOrg() {
      this.registration.organization = { name : this.searchOrgs, ein : null };
      this.newOrg = true;
    },
    async register() {
      try {
        let result = await this.$validator.validateAll();
        if (!result) {
          return result;
        }
      } catch (err) {
        return;
      }

      if (!result) {
        Vue.$eventBus.$emit("notifyUser", "Fix the invalid fields");
        return false;
      }

      this.sending = true;
      try {
        this.registration.username = this.registration.email;
        await Vue.$userService.register(this.registration);
        this.$router.push("Login");
      } catch {
        console.log("something happened here");
      }
    },
  },
};

CodePudding user response：

The problem is you're trying to access the result (let) outside the scope. You defined result inside try block. Defining let result outside will solve your issue.

    let result
    try {
        result = await this.$validator.validateAll();
        if (!result) {
          return result;
        }
      } catch (err) {
        return;
      }

      if (!result) {
        Vue.$eventBus.$emit("notifyUser", "Fix the invalid fields");
        return false;
      }

CodePudding user response：

The v-model binding on the EIN text field should be registration.organization.ein instead of registration.ein