Thinking in Vue#
Week 01 · Vue 2
Who changes the interface when the state changes?
The fault on the desk#
The inherited careers site changes button labels with querySelector. Its saved flag says one thing; the screen says another. Before adding features, replace those competing instructions with one state model.
Follow the ownership#
User activates Save
↓
saved changes
↓
Vue updates the label
Read this seam#
new Vue({
el: '#app',
data: { saved: false },
methods: {
toggleSaved() {
this.saved = !this.saved
}
}
})Make the failure visible#
Click Save, then change saved in DevTools. Both routes must produce the same label. If they disagree, find the DOM write that bypasses state.
Keep / change#
Keep the observable behaviour; replace the mechanism. This is the same bargain you will make during the Vue 3 migration.
Leave with evidence#
A reactive interview profile
Compare v-if and v-show by inspecting the removed or hidden element. Record when retaining local input state matters.