UnivateProperties/src/components/property/propertyUserField.vue

<template>
  <div class="row">
    <div class="col-md-4" v-for="(currentField, i) in fields" :key="i">
      <div v-if="!setFields[i] && currentField.type !== 'yesno'">
        <label class="uniSelectLabel" style="margin-top:10px;">{{ currentField.name }}</label>
      </div>
      <float-label
        v-if="currentField.type === 'number'"
        :label="currentField.name"
        style="width:100%;top:-1em !important;"
      >
        <input
          v-if="currentField.type === 'number'"
          class="form-control uniInput"
          type="number"
          style="margin-top:20px;"
          :name="currentField.name"
          :id="currentField.id"
          v-model="setFields[i]"
          @change="UpdateSetFields(currentField, i)"
        />
      </float-label>
      <float-label
        v-if="currentField.type === 'text'"
        :label="currentField.name"
        style="width:100%;top:-1em !important;"
      >
        <input
          v-if="currentField.type === 'text'"
          class="form-control uniInput"
          type="text"
          style="margin-top:20px;"
          :name="currentField.name"
          :id="currentField.id"
          v-model="setFields[i]"
          @change="UpdateSetFields(currentField, i)"
        />
      </float-label>
      <div class="input-group" v-if="currentField.type === 'yesno'">
        <label class="uniSelectLabel" :for="currentField.name">{{ currentField.name }}</label>
        <input
          type="checkbox"
          :id="currentField.id"
          :name="currentField.name"
          style="margin-left:-5px; margin-top:10px"
          v-model="setFields[i]"
          @change="UpdateSetFields(currentField, i)"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserDefinedField",
  props: {
    fields: { type: Array, default: () => [] }
  },
  data() {
    return {
      setFields: []
    };
  },
  methods: {
    UpdateSetFields(field, index) {
      const item = {
        userDefinedFieldId: field.id,
        value: this.setFields[index],
        type: field.type
      };
      if (item) {
        this.$emit("UpdateUserDefinedFields", item);
      }
    },
    GetFirstLetter(value) {
      if (value) {
        return value.slice(0, 1);
      }
      return "";
    }
  }
};
</script>