Как проверить формы внутри vuetify stepper с помощью vee-validate - PullRequest
Новая
       27

Как проверить формы внутри vuetify stepper с помощью vee-validate

0 голосов
/ 28 апреля 2018

Я пытаюсь проверить форму внутри шагового компонента vuetify. Мне удалось как-то сделать проверку. Но я запутался, является ли это хорошим способом для проверки на vuetify stepper.

Я использую тот же номер метода, что и номер шага в мастере. Я использую vee-validate для проверки с помощью области. 

  methods: {
    submitForm1(scope) {
      debugger;
      this.$validator.validateAll(scope).then(result => {
        if (result) {
          this.e1 = 2;
        }
      });
    },
    submitForm2(scope) {
      debugger;
      this.$validator.validateAll(scope).then(result => {
        if (result) {
          this.e1 = 3;
        }
      });
    }
  },

Данные: 

  data() {
    return {
      e1: 0,
      name: "",
      resultStep1: true
    };
  }

Vuetify Stepper: Form1 

<v-stepper-content step="1">
    <form data-vv-scope="form1">
        <v-card color="lighten-1" class="mb-5" height="200px">
            <v-card-text>
                <v-text-field 
                v-model="name" label="Contract Type" 
                :counter="10" 
                :error-messages="errors.collect('name')" 
                v-validate="'required|max:10'" 
                data-vv-name="name" required data-vv-scope="form1">
            </v-text-field>
            </v-card-text>
        </v-card>
        <v-btn color="secondary" @click.native="submitForm1('form1')">Next</v-btn>
        <v-btn flat>Cancel</v-btn>
    </form>    
</v-stepper-content>

Форма 2: 

<v-stepper-content step="2">
    <form data-vv-scope="form2">
        <v-card color="lighten-1" class="mb-5" height="200px">
            <v-card-text>
                <v-text-field 
                v-model="email" label="Contract Email" 
                :counter="10" 
                :error-messages="errors.collect('email')" 
                v-validate="'required|max:10'" 
                data-vv-name="email" required data-vv-scope="form2">
            </v-text-field>
            </v-card-text>
        </v-card>
        <v-btn color="secondary" @click.native="submitForm2('form2')">Next</v-btn>
        <v-btn flat>Cancel</v-btn>
    </form>   
</v-stepper-content>

Кажется, будет трудно управлять формами и проверкой, если шаг увеличится, в зависимости от способа, которым я реализую. Потому что мне нужно добавить номер метода с количеством шагов.

Также, пожалуйста, предложите мне, если я хочу иметь кнопку для возврата формы. Как мне это сделать?

1 Ответ

0 голосов
/ 02 мая 2018

Предполагая, что e1 является вашей v-моделью для степпера:

Я думаю, вы можете разложить свою функцию submitForm следующим образом: 

methods: {
  submitForm(scope) {
    debugger;
    this.$validator.validateAll(scope).then(result => {
      if (result) {
        this.e1++;
      }
    });
  },
  goBack(){
    this.e1--
  }
}

Просто назовите это так в своем html: 

@click.native="submitForm('yourFormScopeName')"

И вы можете привязать метод goBack к другой кнопке или к любой другой кнопке

...