Пример Vee-validate Basic не работает - ошибки не определены

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

Как я получаю сообщение об ошибке: errors not defined.

<!DOCTYPE html>
<html>
<head>
<head>
<body>
  <div id="app">
    <h1>asdfasd</h1>
    <form action='#' method='POST'>
      <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
      <span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
      <button class="button is-link" name='submitform' value='go'>Submit</button>
    </form>
  </div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/3.0.5/vee-validate.full.min.js"></script>
  <script>
    Vue.use(VeeValidate);
    new Vue({
      el: "#app",
      template: '#app',
      data() {
        return {
          email_primary: null
        };
      }
    });
  </script>
</body>
</html>


javascript vue.js vuejs2 vee-validate
person Community    schedule 22.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, вы используете veevalidate 3 вместо veeValidate 2. Я обновил veevalidate до версии 2 в своем ответе, а также добавил v-model="email_primary"

Поскольку у вас уже есть шаблон, я удалил template: '#app',. Пожалуйста, смотрите ниже

<!DOCTYPE html>
<html>

<head>

    <head>

    <body>
        <div id="app">
            <h1>asdfasd</h1>
            <form action='#' method='POST'>
                <input v-model="email_primary" v-validate="'required|email'"
                    :class="{'input': true, 'is-danger': errors.has('email_primary') }"
                    name="email_primary" type="text" placeholder="email_primary">
                <span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
                <button class="button is-link" name='submitform' value='go'>Submit</button>
            </form>
        </div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.15/vee-validate.min.js"></script>
        <script>
            Vue.use(VeeValidate);
            new Vue({
                el: "#app",                
                data() {
                    return {
                        email_primary: null
                    };
                }
            });
        </script>
    </body>
</html>

Вот рабочая скрипка. Надеюсь, мой ответ поможет.

person kikuyu1    schedule 22.11.2019