यदि सबमिट बटन को किसी फॉर्म में क्लिक किया जाता है, तो त्रुटि होने पर इसे स्वचालित रूप से पहली सत्यापन त्रुटि पर स्क्रॉल करना चाहिए। मैंने पढ़ा है कि मैं इसके लिए "स्क्रॉलटोव्यू" का उपयोग कर सकता हूं, लेकिन मुझे नहीं पता कि वास्तव में कैसे।

मैंने त्रुटियों की स्थिति में बस स्क्रॉल करने के लिए इसे पहले से ही एक साधारण स्क्रॉलटो (0.0) के साथ आजमाया है और यह पूरी तरह से काम करता है। हालांकि, यह वह समाधान नहीं है जो मैं चाहता हूं।

< script >
  ...
  let name = 'm-form-user';
export default {
  name: name,
  mixins: [baseForm],
  props: {
    name: {
      type: String,
      default: name
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'create',
      validator: function(value) {
        return ['edit', 'create'].indexOf(value) !== -1
      }
    },
  },
  data: () => ({
    form: {
      firstName: '',
      lastName: '',
      position: '',
      email: '',
      mobile: '',
      roles: []
    }
  }),
  async created() {
    if (!this.isCreationForm && this.$route.params.id) {
      if (!this.editingUser.length) {
        await this.requestUser({
          id: this.$route.params.id
        });
      }
      Object.assign(this.form, this.editingUser);
      this.form.roles.pop()
    }
  },
  computed: {
    ...mapGetters({
      getUser: "users/read"
    }),

    text() {
      return {
        cancel: this.$t('modules.forms.m-form-user.buttons.cancel'),
        submit: this.$t('modules.forms.m-form-user.buttons.submit')
      }
    },

    editingUser() {
      return this.getUser(this.$route.params.id)
    },
    isCreationForm() {
      return this.type === 'create'
    }
  },
  methods: {
    ...mapActions({
      requestCreateUser: 'users/create',
      requestUpdateUser: 'users/update',
      requestUser: 'users/read'
    }),
    async submit() {
      const validAll = await this.$validator.validateAll();
      const validIdentify = this.validateIdentify();

      if (!validAll || !validIdentify) {


        // ScrolltoView

        return;
      }


      try {
        this.setOrganizationRelation();
        let user = this.isCreationForm ? await this.createUser() : await this.updateUser();
        this.notify.success(this.$t(`notifications.account.userManagement.${ this.isCreationForm ? 'created':'edited'}`, {
          firstName: user.firstName,
          lastName: user.lastName
        }))
        this.redirect(this.nav.dashboard.account.users.view.name, {
          id: user._id
        })
      } catch (e) {
        if (e.response && e.response.status === 400) {
          e.response.data.violations.forEach(violation => {
            if (violation.propertyPath === 'username') return; //TODO temporary workaround, remove it when we get correct response from server
            this.$validator.errors.add({
              id: violation.propertyPath,
              field: violation.propertyPath,
              msg: violation.message
            });


            const field = this.$validator.fields.find({
              name: violation.propertyPath
            });

            if (!field) {
              throw `Field "${violation.propertyPath}" in "${this.$options._componentTag}" component don't have validation on client side!`;
            }

            field.setFlags({
              invalid: true,
              valid: false,
              validated: true
            });
          });
        } else {
          this.notify.processUnhandledError(e);
        }
      }

    },
    async createUser() {
      return await this.requestCreateUser({ ...this.form,
        password: passwordGenerator.generate()
      });
    },
    async updateUser() {
      return await this.requestUpdateUser(this.form)
    },
    cancel() {
      this.goBack();
    },

    validateIdentify() {
      if (!this.form.email && !this.form.mobile) {
        const fields = (({
          email,
          mobile
        }) => ({
          email,
          mobile
        }))(this.$refs);
        Object.keys(fields).forEach((key) => {
          let field = this.$validator.fields.find({
            name: fields[key].name
          });

          this.$validator.errors.add({
            id: field.id,
            field: field.name,
            msg: this.$t('modules.forms.m-form-user.sections.contacts.emptyContacts')
          });

          field.setFlags({
            invalid: true,
            valid: false,
            validated: true
          });

          this.$refs.emailBlock.open();
          this.$refs.mobileBlock.open();
        });
        return false;
      }
      return true;
    },
    setOrganizationRelation() {
      const rel = {
        organization: this.$user.relationships.organization
      };
      setRelations(this.form, rel)
    }
  }
} <
/script>
<m-block-form-fields :required="false">
  <template #title>
                    {{$t('modules.forms.m-form-user.sections.personal.title')}}
                </template>

  <template>
                    <v-layout wrap>
                        <v-flex xs12>
                            <e-input-user-name v-model="form.firstName" rules="required" required-style/>
                        </v-flex>
                        <v-flex xs12>
                            <e-input-user-surname v-model="form.lastName" rules="required" required-style/>
                        </v-flex>
                        <v-flex xs12>
                            <e-input-user-position-function v-model="form.position"/>
                        </v-flex>
                    </v-layout>
                </template>
</m-block-form-fields>
1
SGG 26 मार्च 2020, 18:14

2 जवाब

सबसे बढ़िया उत्तर

नीचे दिए गए पहले त्रुटि संदेश का पता लगाने के लिए document.querySelector का उपयोग करने का प्रयास करें।

      if (!validAll || !validIdentify) {
        const el = document.querySelector(".v-messages.error--text:first-of-type");
        el.scrollIntoView();
        return;
      }
3
Eldar 26 मार्च 2020, 15:32

यह @ एल्डर के उत्तर पर आधारित है।

चूंकि आप डीओएम बदल रहे हैं, आप केवल डीओएम अपडेट होने के बाद ही नए तत्व की तलाश करना चाहते हैं।

मैं इसे nextTick के साथ काम करने में सक्षम कर पाया।

if(!validAll || !validIdentify) {
    // Run after the next update cycle
    this.$nextTick(() => {
        const el = this.$el.querySelector(".v-messages.error--text:first-of-type");
        this.$vuetify.goTo(el);
        return;
    });
}
3
petey 2 नवम्बर 2020, 23:13