yeuimu
6c61a4e871
- 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
2.1 KiB
2.1 KiB
title, impact, impactDescription, type, tags
| title | impact | impactDescription | type | tags | |||||
|---|---|---|---|---|---|---|---|---|---|
| Never Use Arrow Functions in Methods Option | HIGH | Arrow functions prevent Vue from binding `this` to the component instance | capability |
|
Never Use Arrow Functions in Methods Option
Impact: HIGH - Using arrow functions in the methods option causes this to be undefined or the wrong context, leading to runtime errors when trying to access component data, computed properties, or other methods.
Arrow functions lexically bind this from their enclosing scope, not from the object they're defined on. Vue's methods option requires regular functions so Vue can bind this to the component instance.
Task Checklist
- Always use regular function syntax for methods in Options API
- If using ES6 shorthand, use method shorthand (preferred)
- Arrow functions ARE allowed inside methods for callbacks
Incorrect:
export default {
data() {
return { count: 0 }
},
methods: {
// WRONG: Arrow function - `this` will be undefined
increment: () => {
this.count++ // Error: Cannot read property 'count' of undefined
},
// WRONG: Arrow function assigned to property
decrement: () => {
this.count--
}
}
}
Correct:
export default {
data() {
return { count: 0 }
},
methods: {
// CORRECT: ES6 method shorthand (preferred)
increment() {
this.count++ // Works! this refers to component instance
},
// CORRECT: Traditional function expression
decrement: function() {
this.count--
},
// Arrow functions ARE fine for callbacks INSIDE methods
fetchData() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
this.data = data // Arrow function inherits `this` from fetchData
})
}
}
}