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>
      <input
        v-if="currentField.type === 'number'"
        class="form-control form-control-lg form-control-a"
        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 form-control-lg form-control-a"
        type="text"
        name="currentField.name"
        id="currentField.id"
        v-model="setFields[i]"
        @change="UpdateSetFields(currentField, i)"
      />
      <div v-if="currentField.type === 'yesno'">
        <select
          class="form-control form-control-lg form-control-a"
          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);
    },
  },
};
</script>