Проверка формы с помощью vue js выдает ошибку при попытке инициализации

Question

Я испытываю VueJS на проекте для клиента, и теперь я застрял с этим на некоторое время.

Проблема с Det, с которой я сталкиваюсь, заключается в том, что я продолжаю получать

error: ReferenceError: «checkForm не определен»

если я удаляю @submit="checkForm" из HTML-кода, который я получаю:

ReferenceError: «bureauId не определен».

У меня самая новая версия vue.js с сайта.Кто-нибудь получил представление о том, что я делаю неправильно?

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

<div id="order_form_div">
    <form id="order_form" enctype="multipart/form-data" @submit="checkForm" novalidate="true">
        <div class="field">
            <label class="label">Bureau</label>
            <div class="control">
                <div class="select">
                  <select name="bureauId" v-model="bureauId" id="bureau_list"></select>
                </div>
            </div>
        </div>

        <div class="field" style="display: none;">
            <label class="label">Kunde</label>
            <div class="control">
                <div class="select">
                  <select name="customerId" v-model="customerId" id="customer_list"></select>
                </div>
            </div>
        </div>

        <div class="field">
            <label class="label">Ordre afgivet af medarbejder i bureau</label>
            <div class="control">
                <input type="text" name="orderedBy" v-model="orderedBy" class="input" />
            </div>
        </div>

        <div class="field">
            <label class="label">Ordre fil</label>
            <div class="control">
                <div class="file has-name">
                    <label class="file-label">
                        <input class="file-input" type="file" accept="application/zip,.xls,.xlsx" name="orderFile" id="order_file">
                        <span class="file-cta">
                            <span class="file-label">Vælg fil</span>
                        </span>
                        <span class="file-name" id="file_name_container">Der er ikke blevet valgt en fil</span>
                    </label>
                </div>
                <div class="note">Hvis du opretter en ordre som egen forfatter skal formattet være zip som indeholde ordrefilen og alle artikler og billeder <a href="/examples/eksempel_egen_forfatter.zip" target="_blank">(Hent eksempel fil)</a>.<br> Hvis ordre er partnertekst forfatter skal der uploades en xlsx fil <a href="/examples/ordre.xlsx" target="_blank">(Hent eksempel fil)</a>.</div>
            </div>
        </div>

        <button type="submit" id="is-submit-btn" class="button is-link">Gem</button>
        <button type="button" class="button" onClick="location.href='/orders';">Annuller</button>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const app2 = new Vue({
      el:'#order_form',
      data:{
        errors:[],
        bureauId:null,
        customerId:null,
        orderedBy:null,
      },
      methods:{
        checkForm:function(e) {
          this.errors = [];
          console.log("checkforms");
          if(!this.bureauId) this.errors.push("Bureau required.");
          if(!this.customerId) this.errors.push("Customer required.");
          if(!this.orderedBy) this.errors.push("Orderd by required.");
          if(!this.errors.length) return true;
          e.preventDefault();
        }
      } 
    });
});
</script>

Мне нужно, чтобы он работал как валидатор для полей в форме.

Answer 1

Кажется, это проблема моего собственного кода где-то еще, я вернусь с исправлением, когда найду его, поэтому, если люди в будущем получат такую ​​же проблему.