majiayu000 Common Pitfalls
ChurchTools API
| Pitfall | Wrong | Correct |
|---|---|---|
| Nested params | { params: { key: 'val' } } |
{ key: 'val' } |
| Delete method | churchtoolsClient.delete() |
churchtoolsClient.deleteApi() |
| Tags response | response.data |
response (direct array) |
| Tag domains | 'appointment' |
'person' | 'song' | 'group' |
Vue Components
| Pitfall | Wrong | Correct |
|---|---|---|
| Button type | <button> |
<button type="button"> |
| BaseCard import | Absolute path | Relative: ../common/BaseCard.vue |
| Reactivity | Plain objects | ref() or reactive() |
TypeScript
- Check
src/ct-types.d.tsfor ChurchTools types - Always define interfaces for API responses
- Use strict typing for all data
Build Issues
- Verify import paths after moving components
- Check for missing dependencies in package.json
- Ensure all required fields in API requests
Safari-specific
- Blocks
Secure; SameSite=Nonecookies onhttp://localhost - Blocks third-party cookies from different domains
- Solution: Use Vite proxy + HTTPS
Form Submission
Buttons without type="button" will submit forms and cause page reloads:
<!-- Wrong - triggers form submission -->
<button @click="handleClick">Click</button>
<!-- Correct -->
<button type="button" @click="handleClick">Click</button>
API Error Handling
Always wrap API calls in try-catch with loading states:
try {
loading.value = true
// API call
} catch (err) {
error.value = 'User-friendly message'
console.error('Debug info:', err)
} finally {
loading.value = false
}