chore: init monorepo with existing website and plans

2026-06-15 02:31:15 +08:00
commit 72bc89ab03
488 changed files with 115304 additions and 0 deletions
@@ -0,0 +1,136 @@
+---
+title: v-else Must Immediately Follow v-if or v-else-if
+impact: MEDIUM
+impactDescription: Misplaced v-else causes a compile-time error in SFCs, or renders unconditionally with runtime template compilation
+type: capability
+tags: [vue3, conditional-rendering, v-if, v-else, v-else-if]
+---
+
+# v-else Must Immediately Follow v-if or v-else-if
+
+**Impact: MEDIUM** - A `v-else` or `v-else-if` element must immediately follow a `v-if` or `v-else-if` element in the DOM. If there's any element in between:
+
+- **SFC compilation (Vite/vue-loader):** Vue throws a **compile-time SyntaxError** - the code won't build at all
+- **Runtime template compilation:** The element renders unconditionally (always visible), losing its conditional behavior
+
+In most modern Vue projects using Single File Components, this is caught at build time.
+
+## Task Checklist
+
+- [ ] Place v-else immediately after the v-if element (no elements in between)
+- [ ] Place v-else-if immediately after v-if or another v-else-if
+- [ ] Use `<template>` wrapper if you need to group multiple elements within a branch
+- [ ] If you need content between conditions, restructure using nested conditionals or computed
+
+**Incorrect:**
+```html
+<!-- WRONG: v-else not immediately after v-if -->
+<template>
+  <div v-if="isLoggedIn">
+    Welcome back!
+  </div>
+
+  <p>Some other content in between</p>
+
+  <div v-else>
+    <!-- This v-else is NOT recognized! It will ALWAYS render (unconditionally) -->
+    Please log in
+  </div>
+</template>
+```
+
+```html
+<!-- WRONG: Comment or whitespace element between -->
+<template>
+  <span v-if="status === 'loading'">Loading...</span>
+  <!-- This comment breaks the chain! -->
+  <span v-else-if="status === 'error'">Error occurred</span>
+  <span v-else>Done</span>
+</template>
+```
+
+```html
+<!-- WRONG: Text node between conditions -->
+<template>
+  <div v-if="showA">A</div>
+  Just some text here
+  <div v-else>B</div>  <!-- Not recognized, always renders -->
+</template>
+```
+
+**Correct:**
+```html
+<!-- CORRECT: v-else immediately follows v-if -->
+<template>
+  <div v-if="isLoggedIn">
+    Welcome back!
+  </div>
+  <div v-else>
+    Please log in
+  </div>
+
+  <p>Some other content (placed after the conditional block)</p>
+</template>
+```
+
+```html
+<!-- CORRECT: Full v-if/v-else-if/v-else chain -->
+<template>
+  <span v-if="status === 'loading'">Loading...</span>
+  <span v-else-if="status === 'error'">Error: {{ errorMessage }}</span>
+  <span v-else-if="status === 'empty'">No data found</span>
+  <span v-else>{{ data }}</span>
+</template>
+```
+
+```html
+<!-- CORRECT: Using <template> for multiple elements per branch -->
+<template>
+  <template v-if="isLoggedIn">
+    <h1>Welcome back!</h1>
+    <p>Your dashboard</p>
+    <UserStats />
+  </template>
+  <template v-else>
+    <h1>Please log in</h1>
+    <LoginForm />
+  </template>
+</template>
+```
+
+```html
+<!-- CORRECT: Restructure if you need content between conditions -->
+<template>
+  <div class="conditional-section">
+    <div v-if="isLoggedIn">Welcome back!</div>
+    <div v-else>Please log in</div>
+  </div>
+
+  <div class="always-shown">
+    Some other content
+  </div>
+
+  <div class="another-conditional">
+    <div v-if="showMore">More info</div>
+    <div v-else>Click to expand</div>
+  </div>
+</template>
+```
+
+## Debugging Tips
+
+```html
+<!-- If v-else is always visible (rendering unconditionally), check for: -->
+
+<!-- 1. Elements between v-if and v-else -->
+<!-- 2. HTML comments that break the chain -->
+<!-- 3. Text nodes (including whitespace in some cases) -->
+<!-- 4. Component tags that render content between -->
+
+<!-- SFC compilation throws: "v-else/v-else-if has no adjacent v-if or v-else-if" (build fails) -->
+<!-- Runtime template compilation shows a warning but renders the element unconditionally -->
+<!-- Vue DevTools will show the v-else element as not part of the condition chain -->
+```
+
+## Reference
+- [Vue.js Conditional Rendering - v-else](https://vuejs.org/guide/essentials/conditional.html#v-else)