Vue 3: Form Input with v-model implementation guide on Condition Change
I'm attempting to set up I'm following best practices but I'm experiencing an scenario where my form inputs in a Vue 3 application are not updating as expected when I conditionally render a set of fields based on a dropdown selection. I have a dropdown that lets the user select a type of input, and based on that selection, different fields should be displayed. However, the fields that are supposed to appear conditionally don't seem to bind correctly with v-model, and the values aren't reflected in the data object. Here's a simplified version of my component: ```vue <template> <div> <select v-model="inputType"> <option value="text">Text</option> <option value="number">Number</option> </select> <div v-if="inputType === 'text'"> <input v-model="formData.textInput" placeholder="Enter text" /> </div> <div v-if="inputType === 'number'"> <input v-model="formData.numberInput" placeholder="Enter number" type="number" /> </div> </div> </template> <script> export default { data() { return { inputType: 'text', formData: { textInput: '', numberInput: null } }; } }; </script> ``` I’ve tried adding `key` attributes to the conditional elements, which I thought might help Vue track the inputs better, but it hasn’t made any difference. The question I'm running into is that, for example, when I switch from 'text' to 'number', the `numberInput` remains as `null` and doesn't get updated even though I can see the fields on the UI. I also checked the console for any errors, but it just logs the usual reactivity updates. What am I missing? Is there a best practice for handling such conditional inputs in Vue 3? Any guidance would be much appreciated! Cheers for any assistance! This issue appeared after updating to Javascript 3.11.