Validating text elements

Let's get started by adding an <input> element for single-line text:

// src/components/basic.vue
<label for="name">Name</label>
<input v-model="form.name" type="text">

export default {
  data () {
    return {
      form: { name: null }
    }
  },
  methods:{
    checkForm (e) {
      this.errors = []
      if (!this.form.name) {
        this.errors.push('Name required')
      }
    }
  }
}

In the <script> block, we define a name property in the data function that holds the initial null value and will be updated on the input event from the <input> element. We validate the name data in the if condition block when you hit the submit button; if it has no data provided, then we push the error message to errors.