Trying to fix v-model bug for entire day

[Nikhil1017]

Hey guys, I am just getting started with vue.js so forgive me. here is my App.vue file

<template>
  <div>
     <XForm v-model="object" :fields="schema" />
    <pre>{{ object }}</pre>
  </div>
</template>

<script>
import XForm from './components/XForm.vue';
import { ref } from 'vue';

export default {
  components: {
    XForm,
  },
  setup() {
    const object = ref({
        name: '',
        dateOfBirth: '',
        eyeColor: '',
        bio: '',
  } );
    const schema = ref([
      {
        field: 'name',
        label: 'Name',
        component: 'input',
        type: 'text',
      },
      {
        field: 'dateOfBirth',
        label: 'Date of Birth',
        component: 'input',
        type: 'date',
      },
      {
        field: 'eyeColor',
        label: 'Eye Color',
        component: 'select',
        options: [
          { label: 'Blue', value: 'blue' },
          { label: 'Brown', value: 'brown' },
          { label: 'Green', value: 'green' },
        ],
      },
      {
        field: 'bio',
        label: 'Bio',
        component: 'textarea',
      },
    ]);
    return {
      object,
      schema,
    };
  },
};
</script>

here is my XForm.vue file

<template>
  <form>
    <div v-for="field in fields" :key="field.field">
      <component
        :is="field.component || 'input'"
        :name="field.field"
        :value="getObjectValue(field)"
        @input="updateObjectValue(field.field, $event)"
        v-bind="field"
      >
      </component>
    </div>
  </form>
</template>


<script>
export default {
  props: {
  value: {
    type: Object,
  },
  fields: {
    type: Array,
    required: true,
  },
},

  methods: {
    getObjectValue(field) {
  return this.value ? this.value[field.field] : ''
    },
    updateObjectValue(field, value) {
      this.$emit(`update:value.${field}`, value) 
    },
  },
};
</script>

Basically I am trying to generate input forms that are binded to the object array using v-model. So if I enter a value in the name field, the value of name in the object changes accordingly, I have to use a schema to do that. This code generated the input box but does not update the values. I have been trying to fix it all day. Please help me

[chenxch]

@input="updateObjectValue(field.field, $event.target.value)"

try it.

[Nikhil1017]

@chenxch bro it did not update https://stackblitz.com/edit/vitejs-vite-t5puyq?file=src%2Fcomponents%2FXForm.vue,src%2FApp.vue,src%2Fstyle.css but ty for responding

[chenxch]

App.vue

<template>
  <div>
    <XForm v-model:value="object" :fields="schema" />
    <pre>{{ object }}</pre>
  </div>
</template>

<script>
import XForm from './components/XForm.vue';
import { ref } from 'vue';

export default {
  components: {
    XForm,
  },
  setup() {
    const object = ref({
      name: '',
      dateOfBirth: '',
      eyeColor: '',
      bio: '',
    });
    const schema = ref([
      {
        field: 'name',
        label: 'Name',
        component: 'input',
        type: 'text',
      },
      {
        field: 'dateOfBirth',
        label: 'Date of Birth',
        component: 'input',
        type: 'date',
      },
      {
        field: 'eyeColor',
        label: 'Eye Color',
        component: 'select',
        options: [
          { label: 'Blue', value: 'blue' },
          { label: 'Brown', value: 'brown' },
          { label: 'Green', value: 'green' },
        ],
      },
      {
        field: 'bio',
        label: 'Bio',
        component: 'textarea',
      },
    ]);
    return {
      object,
      schema,
    };
  },
};
</script>

XForm.vue

<template>
  <form>
    <div v-for="field in fields" :key="field.field">
      <component
        :is="field.component || 'input'"
        :name="field.field"
        :value="getObjectValue(field)"
        @input="updateObjectValue(field.field, $event.target.value)"
        v-bind="field"
      >
      </component>
    </div>
  </form>
</template>


<script>
export default {
  props: {
  value: {
    type: Object,
  },
  fields: {
    type: Array,
    required: true,
  },
},

  methods: {
    getObjectValue(field) {
  return this.value ? this.value[field.field] : ''
    },
    updateObjectValue(field, value) {
      this.$emit(`update:value`, {...this.value, [field]:value}) 
    },
  },
};
</script>

[Nikhil1017]

@chenxch Dude thank you so much, I've been trying to figure it out for a long time.

[chenxch]

You're welcome, have a good day.😉