ShowEasyFrontEnd/FrontEnd/components/newComponent/form/ElementInput.vue

<template>
  <div class="tw-flex tw-flex-col">
    <label class="tw-mb-[10px] tw-font-normal" :for="input.id"><span>{{ $t(input.label)
    }}<span v-if="input.required" class="required">*</span></span></label>
    <input :id="input.id" :class="[validation ? '' : 'tw-border-error-default']" :type="input.type" :value="value" :maxlength="maxlength"
      v-model="inputVal" />
    <div v-show="errorText" class="tw-text-error-default tw-text-[14px] tw-font-medium tw-leading-[18px] tw-mt-[4px]">
      {{ errorText }}
    </div>
  </div>
</template>
<script>
export default {
  name: "ElementInput",
  props: {
    input: {
      type: Object,
    },
    default: {
      type: String,
    },
    validation: {
      type: Boolean,
    },
    errorText: {
      type: String,
    },
    maxlength:{ 
      type: Number,
      default: 50,
    },
  },
  data() {
    return {
      value: this.default ? this.default : "",
    };
  },
  mounted() { },
  watch: {
    default: {
      handler: function () {
        this.value = this.default;
      },
    },
  },

  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.value = val;
        this.$emit("change", val);
      },
    },
  },
};
</script>
<style lang="scss" scoped>

</style>