UnivateProperties/src/components/property/propertyUserField.vue

<template>
  <div class="row">
    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
      <div class="input-group-prepend">
        <!-- <span class="input-group-text" style="color: #60CBEB">
          <b>{{ GetFirstLetter(currentField.name) }}</b>
        </span> -->
        <div v-if="!setFields[i] && currentField.type !== 'yesno'">
          <label class="uniSelectLabel">{{ currentField.name }}</label>
        </div>
        <input
          v-if="currentField.type === 'number'"
          class="form-control uniInput"
          type="number"
          name="currentField.name"
          id="currentField.id"
          v-model="setFields[i]"
          @change="UpdateSetFields(currentField, i)"
        />

        <input
          v-if="currentField.type === 'text'"
          class="form-control uniInput"
          type="text"
          name="currentField.name"
          id="currentField.id"
          v-model="setFields[i]"
          @change="UpdateSetFields(currentField, i)"
        />
      </div>
    </div>

    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="'checkField' + i">
      <div class="input-group-prepend">
        <!-- <span class="input-group-text" style="color: #60CBEB">
          <b>{{ GetFirstLetter(currentField.name) }}</b>
        </span> -->
        <div v-if="currentField.type === 'yesno'">
          <label class="uniSelectLabel">{{ currentField.name }}</label>
        </div>

        <input
          v-if="currentField.type === 'yesno'"
          type="checkbox"
          id="currentField.id"
          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]
      };
      this.$emit("UpdateUserDefinedFields", item);
    },
    GetFirstLetter(value) {
      if (value) {
        return value.slice(0, 1);
      }
      return "";
    }
  }
};
</script>