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

<template>
    <div class="tw-grid tw-grid-cols-1">
      <input :id="input.id" :class="[validation ? '' : 'tw-border-error-default']" :type="input.type" :value="value" :maxlength="maxlength"
        v-model="inputVal" :placeholder="$t(`${input.placeholder}`)" />
      <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>
import { number } from 'is_js';

export default {
  name: "ElementInputNew",
  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>