CodexBloom - Programming Q&A Platform

advanced patterns of `<input type='number'>` in Vue.js form with computed properties

👀 Views: 23 đŸ’Ŧ Answers: 1 📅 Created: 2025-08-27
vue.js computed-properties forms JavaScript

I've hit a wall trying to I'm updating my dependencies and Hey everyone, I'm running into an issue that's driving me crazy... I'm working on a Vue.js 3 application, and I'm experiencing unexpected behavior with an `<input type='number'>` when using computed properties for form data. The scenario arises when I attempt to submit the form. My form has a number input bound to a computed property that aggregates values from other inputs. Here's a simplified version of my code: ```html <template> <form @submit.prevent="handleSubmit"> <input type="text" v-model="firstInput" /> <input type="text" v-model="secondInput" /> <input type="number" :value="total" readonly /> <button type="submit">Submit</button> </form> </template> <script> export default { data() { return { firstInput: '', secondInput: '', }; }, computed: { total() { return Number(this.firstInput) + Number(this.secondInput); } }, methods: { handleSubmit() { console.log('Submitted:', this.total); // here, I would normally send data to the server } } }; </script> ``` When I submit the form, the `total` computed property does not reflect the current values of `firstInput` and `secondInput`. Instead, it remains `0` until I make a manual change to one of the text inputs after focusing on the number input. I even tried using `v-model` on the number input instead of `:value`, but that didn't help either. The console shows the correct values when the inputs change, but the computed property seems to be cached until something triggers a reactivity update. I've already checked if the inputs are correctly bound, and I've confirmed that the question doesn't occur when I switch the number input to a text input. This leads me to believe that there might be an scenario with how Vue handles the reactivity of number inputs in forms. Any insights on resolving this scenario would be greatly appreciated! I'm using Vue 3.2.0. What's the best practice here? I'm working on a REST API that needs to handle this.