VueJS ReferenceError: result is not defined when submitting registration form

Question

我有一个将 VueJS 链接到 Strapi CMS 数据库的表单。总而言之，如果我输入一个不存在的组织，它应该允许我创建该组织并为其输入 EIN。在我点击提交之前一切正常。

JSON 数据显示它提取了组织名称。但是一旦我进入 EIN 字段，就好像组织名称被删除回到参数中，然后 EIN 就不会被拉入。下面是相关代码，如果有人可能发现导致问题的任何 mistakes/issues .

我得到的错误是：

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

我只分享代码的特定部分，因为它需要整个项目运行，无论如何。

谢谢！

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
                        >

脚本：

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

Answer 1

EIN 文本字段上的 v-model 绑定应该是 registration.organization.ein 而不是 registration.ein

Answer 2

问题是您正在尝试访问 result (let) outside the scope。您在 try 块中定义了 result。在外部定义 let result 将解决您的问题。

    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;
      }

VueJS ReferenceError: result is not defined when submitting registration form

VueJS ReferenceError: result is not defined when submitting registration form

vue.js

strapi

vuejs2