UnivateProperties/src/components/property/propertyUserField.vue

<template>
  <div class="form-group row">
    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
      <label>{{ currentField.name }}</label>
      <div class="input-group-prepend">
        <span class="input-group-text" style="color: #60CBEB">
          <b>{{ GetFirstLetter(currentField.name) }}</b>
        </span>
        <input
          v-if="currentField.type === 'number'"
          class="form-control"
          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"
          type="text"
          name="currentField.name"
          id="currentField.id"
          v-model="setFields[i]"
          @change="UpdateSetFields(currentField, i)"
        />
        <select
          v-if="currentField.type === 'yesno'"
          class="form-control"
          id="currentField.id"
          v-model="setFields[i]"
          @change="UpdateSetFields(currentField, i)"
        >
          <option value="yes">Yes</option>
          <option value="no">No</option>
        </select>
      </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>