scinote-web/app/javascript/vue/forms/fields/number.vue

<template>
  <div class="sci-input-container-v2 mb-2" :class="{'error': !isValidValue}" :data-error="errorMessage">
    <input type="number" v-model="value" class="sci-input" :disabled="marked_as_na" :placeholder="i18n.t('forms.fields.add_number')"></input>
  </div>
</template>

<script>
import fieldMixin from './field_mixin';

export default {
  name: 'NumberField',
  mixins: [fieldMixin],
  data() {
    return {
      value: ''
    };
  },
  computed: {
    isValidValue() {
      const { validations } = this.field.attributes.data;

      if (!validations.response_validation) {
        return true;
      }

      if (validations.response_validation.type === 'between') {
        return this.value >= validations.response_validation.min
         && this.value <= validations.response_validation.max;
      }

      return false;
    },
    errorMessage() {
      const { validations } = this.field.attributes.data;

      if (!validations.response_validation) {
        return '';
      }

      if (validations.response_validation) {
        return validations.response_validation.message;
      }

      return '';
    }
  }
};
</script>