feat(deploy): production deployment setup and fixes
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma binaryTargets for openssl 3.0 - nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal cron, http->https redirect - prisma: add origin_goods.delisted migration, sync missing schema (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz - api: CORS wildcard reflection, helmet CORP cross-origin, price backfill in persistProductDetail, categoryIcon ancestor fallback, mediaByColor per-color gallery in public goods detail - admin: /admin base path (vite + router) - import-data.mjs: udt_name casting, serial sequence advance fix
This commit is contained in:
yeuimu
+139
-139
@@ -1,139 +1,139 @@
|
||||
---
|
||||
title: defineModel Default Value Can Cause Parent-Child Desync
|
||||
impact: HIGH
|
||||
impactDescription: Default values in defineModel don't sync back to parent, causing state inconsistency
|
||||
type: capability
|
||||
tags: [vue3, v-model, defineModel, components, props, two-way-binding]
|
||||
---
|
||||
|
||||
# defineModel Default Value Can Cause Parent-Child Desync
|
||||
|
||||
**Impact: HIGH** - When using `defineModel()` with a default value and the parent doesn't provide a value, the parent and child components will have different values. The parent's ref stays `undefined` while the child uses the default, breaking the two-way binding contract.
|
||||
|
||||
This subtle bug can cause confusing behavior where the parent component shows one value while the child shows another, and updates may not propagate correctly.
|
||||
|
||||
## Task Checklist
|
||||
|
||||
- [ ] Always provide initial values from the parent when using v-model
|
||||
- [ ] Don't rely on defineModel defaults as the primary source of truth
|
||||
- [ ] If defaults are needed, also set them in the parent component
|
||||
- [ ] Test components with and without v-model props provided
|
||||
|
||||
**Problem - Parent and child out of sync:**
|
||||
```html
|
||||
<!-- ChildComponent.vue -->
|
||||
<script setup>
|
||||
// Default value of 1 if parent doesn't provide value
|
||||
const model = defineModel({ default: 1 })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="model" type="number">
|
||||
<!-- Shows: 1 (from default) -->
|
||||
</template>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- ParentComponent.vue -->
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ChildComponent from './ChildComponent.vue'
|
||||
|
||||
// PROBLEM: Parent ref is undefined, not synced with child's default
|
||||
const myValue = ref() // undefined
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ChildComponent v-model="myValue" />
|
||||
|
||||
<!-- DESYNC: Child shows 1, but parent shows undefined -->
|
||||
<p>Parent value: {{ myValue }}</p> <!-- Shows: undefined -->
|
||||
|
||||
<!-- Even after child changes value, parent may not update correctly -->
|
||||
</template>
|
||||
```
|
||||
|
||||
**Solution 1 - Always provide initial value from parent:**
|
||||
```html
|
||||
<!-- ParentComponent.vue -->
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ChildComponent from './ChildComponent.vue'
|
||||
|
||||
// CORRECT: Parent provides the initial value
|
||||
const myValue = ref(1) // Match the expected default
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ChildComponent v-model="myValue" />
|
||||
<p>Parent value: {{ myValue }}</p> <!-- Shows: 1, stays in sync -->
|
||||
</template>
|
||||
```
|
||||
|
||||
**Solution 2 - Child emits default on mount (if parent control not possible):**
|
||||
```html
|
||||
<!-- ChildComponent.vue -->
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const model = defineModel({ default: 1 })
|
||||
|
||||
// Sync default value back to parent on mount
|
||||
onMounted(() => {
|
||||
if (model.value === 1) { // Is using default
|
||||
// Force emit to sync parent
|
||||
model.value = 1
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="model" type="number">
|
||||
</template>
|
||||
```
|
||||
|
||||
**Solution 3 - Use required prop or explicit undefined handling:**
|
||||
```html
|
||||
<!-- ChildComponent.vue -->
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
// Mark as required - TypeScript will warn if not provided
|
||||
const model = defineModel({ required: true })
|
||||
|
||||
// Or handle undefined explicitly
|
||||
const safeModel = computed({
|
||||
get: () => model.value ?? 1, // Provide fallback
|
||||
set: (val) => { model.value = val }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="safeModel" type="number">
|
||||
</template>
|
||||
```
|
||||
|
||||
**Best Practice - Document expected initial values:**
|
||||
```html
|
||||
<!-- ChildComponent.vue -->
|
||||
<script setup>
|
||||
/**
|
||||
* @prop modelValue - The numeric value (parent should initialize to 1 or desired default)
|
||||
*/
|
||||
const model = defineModel({
|
||||
type: Number,
|
||||
default: 1,
|
||||
// Adding validator helps catch issues in development
|
||||
validator: (value) => {
|
||||
if (value === undefined) {
|
||||
console.warn('ChildComponent: v-model value is undefined. Provide initial value from parent.')
|
||||
}
|
||||
return true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Reference
|
||||
- [Vue.js Component v-model](https://vuejs.org/guide/components/v-model.html)
|
||||
- [Vue School - defineModel Guide](https://vueschool.io/articles/vuejs-tutorials/v-model-and-definemodel-a-comprehensive-guide-to-two-way-binding-in-vue-js-3/)
|
||||
---
|
||||
title: defineModel Default Value Can Cause Parent-Child Desync
|
||||
impact: HIGH
|
||||
impactDescription: Default values in defineModel don't sync back to parent, causing state inconsistency
|
||||
type: capability
|
||||
tags: [vue3, v-model, defineModel, components, props, two-way-binding]
|
||||
---
|
||||
|
||||
# defineModel Default Value Can Cause Parent-Child Desync
|
||||
|
||||
**Impact: HIGH** - When using `defineModel()` with a default value and the parent doesn't provide a value, the parent and child components will have different values. The parent's ref stays `undefined` while the child uses the default, breaking the two-way binding contract.
|
||||
|
||||
This subtle bug can cause confusing behavior where the parent component shows one value while the child shows another, and updates may not propagate correctly.
|
||||
|
||||
## Task Checklist
|
||||
|
||||
- [ ] Always provide initial values from the parent when using v-model
|
||||
- [ ] Don't rely on defineModel defaults as the primary source of truth
|
||||
- [ ] If defaults are needed, also set them in the parent component
|
||||
- [ ] Test components with and without v-model props provided
|
||||
|
||||
**Problem - Parent and child out of sync:**
|
||||
```html
|
||||
<!-- ChildComponent.vue -->
|
||||
<script setup>
|
||||
// Default value of 1 if parent doesn't provide value
|
||||
const model = defineModel({ default: 1 })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="model" type="number">
|
||||
<!-- Shows: 1 (from default) -->
|
||||
</template>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- ParentComponent.vue -->
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ChildComponent from './ChildComponent.vue'
|
||||
|
||||
// PROBLEM: Parent ref is undefined, not synced with child's default
|
||||
const myValue = ref() // undefined
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ChildComponent v-model="myValue" />
|
||||
|
||||
<!-- DESYNC: Child shows 1, but parent shows undefined -->
|
||||
<p>Parent value: {{ myValue }}</p> <!-- Shows: undefined -->
|
||||
|
||||
<!-- Even after child changes value, parent may not update correctly -->
|
||||
</template>
|
||||
```
|
||||
|
||||
**Solution 1 - Always provide initial value from parent:**
|
||||
```html
|
||||
<!-- ParentComponent.vue -->
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ChildComponent from './ChildComponent.vue'
|
||||
|
||||
// CORRECT: Parent provides the initial value
|
||||
const myValue = ref(1) // Match the expected default
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ChildComponent v-model="myValue" />
|
||||
<p>Parent value: {{ myValue }}</p> <!-- Shows: 1, stays in sync -->
|
||||
</template>
|
||||
```
|
||||
|
||||
**Solution 2 - Child emits default on mount (if parent control not possible):**
|
||||
```html
|
||||
<!-- ChildComponent.vue -->
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const model = defineModel({ default: 1 })
|
||||
|
||||
// Sync default value back to parent on mount
|
||||
onMounted(() => {
|
||||
if (model.value === 1) { // Is using default
|
||||
// Force emit to sync parent
|
||||
model.value = 1
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="model" type="number">
|
||||
</template>
|
||||
```
|
||||
|
||||
**Solution 3 - Use required prop or explicit undefined handling:**
|
||||
```html
|
||||
<!-- ChildComponent.vue -->
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
// Mark as required - TypeScript will warn if not provided
|
||||
const model = defineModel({ required: true })
|
||||
|
||||
// Or handle undefined explicitly
|
||||
const safeModel = computed({
|
||||
get: () => model.value ?? 1, // Provide fallback
|
||||
set: (val) => { model.value = val }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="safeModel" type="number">
|
||||
</template>
|
||||
```
|
||||
|
||||
**Best Practice - Document expected initial values:**
|
||||
```html
|
||||
<!-- ChildComponent.vue -->
|
||||
<script setup>
|
||||
/**
|
||||
* @prop modelValue - The numeric value (parent should initialize to 1 or desired default)
|
||||
*/
|
||||
const model = defineModel({
|
||||
type: Number,
|
||||
default: 1,
|
||||
// Adding validator helps catch issues in development
|
||||
validator: (value) => {
|
||||
if (value === undefined) {
|
||||
console.warn('ChildComponent: v-model value is undefined. Provide initial value from parent.')
|
||||
}
|
||||
return true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Reference
|
||||
- [Vue.js Component v-model](https://vuejs.org/guide/components/v-model.html)
|
||||
- [Vue School - defineModel Guide](https://vueschool.io/articles/vuejs-tutorials/v-model-and-definemodel-a-comprehensive-guide-to-two-way-binding-in-vue-js-3/)
|
||||
|
||||
Reference in New Issue
Block a user