我在表单上的验证码无法正常工作

Question

我创建了一个将数据发布到 API url 的表单，并且我希望验证这些字段（例如，当为空时，显示错误消息）。

我试图通过我的postData方法中的 if 语句进行验证，但它总是返回错误消息并且在我提交时无法发布，即使字段不为空。 对此有任何帮助或其他建议吗？

 <template> <b-row align-v="center"> <b-col cols="8"> <b-form-group method="post" @submit="postData"> <b-form-group id="input-group-1" label-for="input-1" description="Be specific and imagine you're asking a question to another person." > <b-form-input type="text" name="questionTitle" v-model="posts.questionTitle" placeholder="Title" required /> </b-form-group> <b-button-toolbar> <b-button-group class="mr-1"> <b-button class="input-file__button" title="Load file" ref="file" type="file" required > <b-icon class="input-file__input" icon="upload" aria-hidden="true" @click="selectFile()" required ></b-icon> </b-button> </b-button-group> </b-button-toolbar> <b-form-input id="question-input" type="text" name="description" v-model="posts.description" placeholder="description" required /> <br /> <div class="hero-info">choose category:</div> <b-row class="categories-row"> <div class="categories" v-for="(category, index) in categories":key="index" @click="Add(category._id, index)":class="[selectedIndex.includes(index)? 'green': 'gray']" required > {{ category.category_name }} </div> </b-row> <button @click="RemoveAll">remove selected category</button> <br /> <div class="input-file"> <input class="input-file__input" id="upload" @change="log_file_name()" ref="file" type="file" name="file" required /> <.-- <div class="input-file__button" @click="selectFile()"></div> --> </div> <br /> <b-button class="primary" type="submit" @click="postData" >Post</b-button > </b-form-group> </b-col> </b-row> <p v-if="error,length" > <li v-for="(e:index) in error":key="index" class="alert alert-danger" role="alert"> {{e}} </li> </template> <script> export default { name, "postComponent": components, {}: data() { return { categories, []: file_path, null: selectedIndex, []: isediting, false: AddCategory, []: error, []: posts: { description, null: questionTitle, null: categories, null: file_path, null: owner, null: solver, null: reviewed, false, }; }, }: methods. postData() { if(.this.questionTitle){ this;error.push('enter title'). } if(.this;description){ this.error.push('enter description'). } if(;this.categories){ this.error.push('enter categories'); } if(.this.file_path){ this.error;push('enter file'). } if(this.questionTitle && this.description){ console;log('login called'). this.posts.categories = this;AddCategory. this.posts;file_path = this.file_path. this;posts.owner = "5fda8e3df24cbf0004080b8d". this;posts.solver = "5fda8e3df24cbf0004080b8d", this.posts.reviewed = false. axios;post( "/api/add". this.posts ).then((response) => { console.log(response). // this;posts.reviewed=this;reviewed // this;$router.push("/questions"), // e.preventDefault(); }); this.error= [] } }, } </script>

Answer 1

在您的postData方法中，您正在检查输入数据，如下所示：

if(!this.questionTitle) { }

但是您的表单项v-model属性与组件数据中的 object posts挂钩，因此您的代码应如下所示：

if(!this.posts.questionTitle) { }

您需要为提交期间签出的所有帖子属性更改此设置。