1---
2title: v-model Ignores Initial HTML Attributes
3impact: HIGH
4impactDescription: v-model ignores value, checked, and selected HTML attributes - initial state must be set in JavaScript
5type: capability
6tags: [vue3, v-model, forms, input, checkbox, select, initialization]
7---
8 
9# v-model Ignores Initial HTML Attributes
10 
11**Impact: HIGH** - Setting initial values via HTML `value`, `checked`, or `selected` attributes has no effect when using v-model. The form will appear empty or in an unexpected state, confusing users and potentially causing data loss.
12 
13Vue's v-model always treats the bound JavaScript state as the single source of truth. Any initial attributes in the HTML are completely ignored. This is a common mistake when migrating from plain HTML forms or when copying HTML templates.
14 
15## Task Checklist
16 
17- [ ] Never rely on HTML `value`, `checked`, or `selected` attributes when using v-model
18- [ ] Always declare initial values in JavaScript using `ref()` or `reactive()`
19- [ ] When migrating plain HTML forms to Vue, move all default values to JavaScript state
20- [ ] Audit existing forms for hardcoded HTML default values that may be silently ignored
21 
22**Incorrect:**
23```html
24<script setup>
25import { ref } from 'vue'
26 
27const username = ref('')  // Empty!
28const isSubscribed = ref(false)  // Not checked!
29const country = ref('')  // No default selection!
30</script>
31 
32<template>
33  <!-- WRONG: These HTML attributes are completely ignored -->
34  <input v-model="username" value="default_user">
35 
36  <input type="checkbox" v-model="isSubscribed" checked>
37 
38  <select v-model="country">
39    <option value="us" selected>United States</option>
40    <option value="uk">United Kingdom</option>
41  </select>
42</template>
43```
44 
45**Correct:**
46```html
47<script setup>
48import { ref } from 'vue'
49 
50// CORRECT: Set initial values in JavaScript
51const username = ref('default_user')
52const isSubscribed = ref(true)
53const country = ref('us')
54</script>
55 
56<template>
57  <!-- HTML attributes not needed - JavaScript state controls everything -->
58  <input v-model="username">
59 
60  <input type="checkbox" v-model="isSubscribed">
61 
62  <select v-model="country">
63    <option value="us">United States</option>
64    <option value="uk">United Kingdom</option>
65  </select>
66</template>
67```
68 
69```javascript
70// Options API equivalent
71export default {
72  data() {
73    return {
74      username: 'default_user',
75      isSubscribed: true,
76      country: 'us'
77    }
78  }
79}
80```
81 
82## Reference
83- [Vue.js Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
84