Skip to content

Instantly share code, notes, and snippets.

@isaacssemugenyi
Created June 5, 2021 10:59
Show Gist options
  • Save isaacssemugenyi/7502ab00065210b6cdf1fcc269aa2783 to your computer and use it in GitHub Desktop.
Save isaacssemugenyi/7502ab00065210b6cdf1fcc269aa2783 to your computer and use it in GitHub Desktop.
Add the p tag at the bottom of every input to display the errors when found in the errors object
<template>
<div class="row">
<div class="offset-md-3 col-md-6 mt-5">
<h3>Article Form</h3>
<form action="#" @submit.prevent="submitData">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Title"
v-model="article.title"
@blur="validate('title')"
@keypress="validate('title')"
/>
<p
class="errors"
v-if="!!errors.title"
>{{errors.title}}</p>
</div>
<div class="form-group">
<textarea
type="text"
class="form-control"
placeholder="description"
v-model="article.description"
@blur="validate('description')"
@keypress="validate('description')"
></textarea>
<p
class="errors"
v-if="!!errors.description"
>{{errors.description}}</p>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" value="submit" />
</div>
</form>
</div>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment