title: Server-side input validation with Quasar (Vue)
body: <p>I'm looking for a reusable solution for server side input validation with <a href="https://quasar.dev" rel="nofollow noreferrer">Quasar Framework</a>.
  I use the <a href="https://quasar.dev/vue-components/input" rel="nofollow noreferrer"><code>q-input</code></a> field. There are 2 props that can be used for the error output <code>error</code> and <code>error-message</code>. My server response on a validation error is a 400 response with this json</p>
  <pre><code>{
    errors: { username: ['Username is to long.', 'User not valid'] },
    title: 'One or more validation errors occurred.',
    status: 400,
    traceId: '80000005-0000-ff00-b63f-84710c7967bb'
  }
  </code></pre>
  <p>I am currently using this logic, but I cannot move it to a mixin because I need access to the error field. The full example is available here <a href="https://codesandbox.io/s/falling-rain-dc78o?file=/src/pages/Index.vue" rel="nofollow noreferrer">codesandbox.io</a></p>
  <pre><code>&lt;q-input
    v-model=&quot;username&quot;
    filled
    label=&quot;Username *&quot;
    :error-message=&quot;getErrorForField('username')&quot;
    :error=&quot;isErrorForField('username')&quot;
  /&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>getErrorForField(field) {
    if (!this.errors) {
      return ''
    }
    const keys = Object.keys(this.errors)
    const key = keys.find(
      element =&gt; element.toLowerCase() === field.toLowerCase()
    )
    if (this.errors[key]) {
      return this.errors[key].join('\r\n')
    }
  },
  isErrorForField(field) {
    if (!this.errors) {
      return false
    }
    const keys = Object.keys(this.errors)
    const key = keys.find(
      element =&gt; element.toLowerCase() === field.toLowerCase()
    )
    if (this.errors[key]) {
      return true
    }
  }
  </code></pre>