Question

我正在为客户的一个项目上试用VueJS，现在已经坚持了很长时间。

我面临的问题是我不断患病

错误：ReferenceError：“未定义checkForm”

如果我从HTML中删除@submit="checkForm"，则会得到：

ReferenceError：“未定义bureauId”。

我从网站上获得了最新版本的vue.js。有人知道我在做什么错吗？

我试图将id为order_form_div的div放到外面，并设置元素以对另一篇文章中的建议做出反应，但是没有运气，我尝试使用表单中的id。

<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

这似乎是我自己的代码在其他地方出现的问题，当我找到它时，我会带一个修复程序，所以如果将来人们遇到同样的问题。

尝试初始化时，使用vue js进行表单验证会出现错误

1 个答案: