hinsencamp

<template>
  <div class="panel">
    <div class="header">
      <h2 class="headline">{{ headline }}</h2>
    </div>
    <div class="body">
      <slot />
    </div>
  </div>
</template>

hinsencamp

<script>
export default {
  name: "Panel",
  props: {
    headline: String,
  }
};
</script>

hinsencamp

<template>
  <div class="input-wrapper">
    <label>{{label}}</label>
    <input
      class="input"
      v-if="type==='input'"
      @input="customInput($event.target.value)"
      autocomplete="off"
      type="text"
    >

hinsencamp

<template>
      <Panel class="calculator-panel" headline="Income Tax Calculator">
        <template>
        <span>content goes here.<span/>
        </template>
      </Panel>
</template>

hinsencamp

<script>
import { Validator } from "vee-validate";
const validator = new Validator();

... 

data() {
    return {
      validationError: ""
    };

hinsencamp

import VeeValidate from "vee-validate";

Vue.use(VeeValidate);

hinsencamp

<template>
...
 <transition name="alert-in"
  enter-active-class="animated flipInX"
  leave-active-class="animated flipOutX">
   <p v-if="validationError" class="alert" >
    {{ validationError }}
   </p>
 </transition>
</template>

hinsencamp

<template>
...
 <v-select
      v-if="type ==='dropdown'"
      class="input-dropdown"
      @input="customInput"
      :options="options"
    />
</template>
<script>

hinsencamp

<template>
 <div
  v-if="type ==='radio'"
  v-for='option in options'
  :key='option.label'
 >
 <input
  type="radio"
  class="radio"
  :id="option.label"

hinsencamp

<template>
 <form @submit.prevent="handleSubmit">
  ...
  <button
   class='submit-btn'
   :disabled="!isEnabled"
   type="submit"
  >
   Calculate!      
  </button>