👀 Views: 2 💬 Answers: 1 📅 Created: 2025-06-10

vue.js vue3 forms dynamic v-model JavaScript

I tried several approaches but none seem to work. I'm working on a Vue 3 application where I have a form that dynamically generates input fields based on user selection. However, I'm facing an issue where the state of these dynamic inputs is lost when the parent component re-renders. I’m using `v-model` for two-way data binding, but the values seem to reset unexpectedly. Here's a simplified version of my setup: ```vue <template> <div> <select v-model="selectedOption" @change="updateFields"> <option value="">Select an option</option> <option value="A">Option A</option> <option value="B">Option B</option> </select> <form @submit.prevent="submitForm"> <div v-for="(field, index) in dynamicFields" :key="index"> <input v-model="field.value" :placeholder="field.placeholder" /> </div> <button type="submit">Submit</button> </form> </div> </template> <script> export default { data() { return { selectedOption: '', dynamicFields: [] }; }, methods: { updateFields() { if (this.selectedOption === 'A') { this.dynamicFields = [{ value: '', placeholder: 'Field A1' }, { value: '', placeholder: 'Field A2' }]; } else if (this.selectedOption === 'B') { this.dynamicFields = [{ value: '', placeholder: 'Field B1' }, { value: '', placeholder: 'Field B2' }]; } else { this.dynamicFields = []; } }, submitForm() { console.log(this.dynamicFields); } } }; </script> ``` The problem arises when I make changes to the `selectedOption` and trigger the `updateFields` method. The `dynamicFields` array gets recreated, and all previously entered values are lost. I tried using `v-model` with `:key="field.placeholder"` to maintain the state, but it didn't solve the issue. I also experimented with storing the input values in a separate data structure, but it still felt clunky and didn't provide the expected behavior. Is there a better pattern to maintain the state of dynamically generated form fields in Vue 3, especially during re-renders? Any insights or best practices would be greatly appreciated! This is part of a larger CLI tool I'm building.