How can I create dynamic forms in Vue.js?

How can I create dynamic forms in Vue.js?

You can create dynamic forms in Vue.js by using v-for to iterate over an array of form fields and binding them with v-model.

Can you show me a simple example?

Sure! Here's a basic example:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div v-for="(field, index) in fields" :key="index">
        <label>{{ field.label }}</label>
        <input v-model="field.value" :type="field.type" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        { label: 'Name', value: '', type: 'text' },
        { label: 'Email', value: '', type: 'email' }
      ]
    };
  },
  methods: {
    submitForm() {
      console.log(this.fields);
    }
  }
};
</script>

What if I want to add or remove fields dynamically?

You can manage the fields array by adding methods to push or splice elements from the array. For example:

addField() {
  this.fields.push({ label: 'New Field', value: '', type: 'text' });
},
removeField(index) {
  this.fields.splice(index, 1);
}