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

<template>
  <div class="tw-flex tw-flex-col">
    <label class="tw-mb-[10px]" :for="input.id"><span>
        {{ $t(input.label)}}<span v-if="input.required" class="required">*</span></span></label>
    <input :id="input.id" :type="input.type" :class="[validation1 ? '' : 'tw-border-error-default']" :value="address1"
      v-model="inputVal" class="tw-mb-[10px]" />
    <input :id="`${input.id}-2`" :class="[validation2 ? '' : 'tw-border-error-default']" :type="input.type"
      :value="address2" v-model="inputVal2" />
  </div>
</template>
<script>
export default {
  name: "ElementAddress",
  props: {
    input: {
      type: Object,
    },
    default1: {
      type: String,
    },
    default2: {
      type: String,
    },
    validation1: {
      type: Boolean,
    },
    validation2: {
      type: Boolean,
    },
  },
  data() {
    return {
      address1: this.default1 ? this.default1 : "",
      address2: this.default2 ? this.default2 : "",
    };
  },
  mounted() { },
  watch: {
    default1: {
      handler: function () {
        this.address1 = this.default1;
      },
    },
    default2: {
      handler: function () {
        this.address2 = this.default2;
      },
    },
  },
  computed: {
    inputVal: {
      get() {
        return this.address1;
      },
      set(val) {
        this.address1 = val;
        this.$emit("change1", val);
      },
    },
    inputVal2: {
      get() {
        return this.address2;
      },
      set(val) {
        this.address2 = val;
        this.$emit("change2", val);
      },
    },
  },
};
</script>
<style lang="scss" scoped>

</style>