Отключена кнопка отправки, но действительные данные формы не активируют ее (vee-validate)

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

После ввода правильных данных в каждое из полей кнопка отправки остается неактивной.

Разметка:

<div id="app">
  <form action='#' method='POST'>

    <div class="columns">

      <div class="column">
        <div class="field">
          <div class="control">
            <label class="label">Last Name</label>
            <input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('lastname') }" class="input" name="lastname" type="text">
            <span v-show="errors.has('lastname')" class="help is-danger">{{ errors.first('lastname') }}</span>
          </div>
        </div>
      </div>

      <div class="column">
        <div class="field">
          <div class="control">
            <label class="label">Desk Number</label>
            <input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('desknum') }" class="input" name="desknum" type="text">
            <span v-show="errors.has('desknum')" class="help is-danger">{{ errors.first('desknum') }}</span>
          </div>
        </div>
      </div>
    </div>

    <button :disabled='!isComplete' class="button is-link" name='submit_data' value='go'>Submit</button>
  </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.0.9/vee-validate.min.js">
<script>

            Vue.use(VeeValidate);
            new Vue({
              el: "#app",
              template: '#app',
              data() {
                return {
                  p_pat_name_first: null,
                  p_pat_name_last: null,
                  p_pat_date_birth: null,
                  p_pat_gender: null,
                  p_pat_twin: null,
                  p_emory_id: null,
                  p_mother_name_first: null,
                  p_mother_name_last: null,
                  p_parent_phone_primary: null,
                };
              },
              computed: {
                isComplete() {
                  return
                  this.p_pat_name_first &&
                    this.p_pat_name_last &&
                    this.p_pat_date_birth &&
                    this.p_pat_gender &&
                    this.p_pat_twin &&
                    this.p_mother_name_first &&
                    this.p_mother_name_last &&
                    this.p_parent_phone_primary;
                }
              }
            });

</script>

Fiddle

Что я делаю неправильно, что не позволяю кнопке «Отправить» активироваться, когда форма заполнена и действительна?


vue.js vee-validate disabled-control
person a coder    schedule 21.06.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проще говоря, ваше условие в isComplete() относится к значениям в ваших данных, которые не имеют отношения к форме. Ни одно из полей в вашей форме не имеет v-model, поэтому их изменение не влияет на переменные, указанные в inComplete().

Обычный способ в vee-validate проверить, недействительны ли какие-либо поля, выглядит следующим образом:

<button :disabled="errors.any()" type="submit">Submit</button>

Это отключит кнопку «Отправить» только после того, как форма станет недействительной, поэтому при загрузке страницы она будет выглядеть включенной, пока пользователь не сделает что-то с формой, что сделает ее недействительной.

См. Рабочий пример здесь (с одним входом с установленной v-моделью): https://jsfiddle.net/ryleyb/v7a2tzjp/8/

person Ryley    schedule 22.06.2018
comment
Это прекрасно работает, спасибо. Могу я спросить, что делает v-модель? - person a coder; 22.06.2018
comment
v-модель связывает ваши элементы данных с полем ввода. Итак, в моей скрипке все, что вы вводите в поле ввода фамилии, волшебным образом становится значением в p_pat_name_last - вы можете проверить, добавив console.log(this.p_pat_name_last) в метод doSubmit или где-нибудь в html add {{p_pat_name_last}} - person Ryley; 22.06.2018