@mintjamsinc/ichigojs 0.1.57 → 0.1.58

package/README.md

@@ -219,6 +219,37 @@ List rendering:
 </ul>
 ```
 
+##### Using `<template>` as a fragment
+
+`v-for` and `v-if` can be placed on a `<template>` element to render
+multiple nodes per iteration without introducing a wrapper element:
+
+```html
+<dl>
+  <template v-for="item in items" :key="item.id">
+    <dt>{{ item.term }}</dt>
+    <dd>{{ item.description }}</dd>
+  </template>
+</dl>
+```
+
+`<template>` supports **either** `v-for` **or** `v-if` per element, but
+**not both on the same `<template>`**. If you need both, either:
+
+1. Nest them on separate `<template>` / element levels:
+    ```html
+    <template v-for="item in items" :key="item.id">
+      <div v-if="item.visible">{{ item.name }}</div>
+    </template>
+    ```
+2. Use a regular element instead of `<template>`:
+    ```html
+    <div v-for="item in items" v-if="item.visible" :key="item.id">...</div>
+    ```
+
+Combining `v-for` and `v-if` on the same element works for all
+non-`<template>` tags (v-for is evaluated first, v-if per iteration).
+
 #### v-show
 
 Toggle visibility:

package/dist/ichigo.cjs

@@ -8653,6 +8653,14 @@
             // Other directives (@click, :class, etc.) will be processed on the cloned/rendered elements.
             const attributes = [];
             if (element.hasAttribute(StandardDirectiveName.V_FOR)) {
+                // <template v-for v-if> is not supported: v-for clones .content (a
+                // DocumentFragment), so the v-if attribute on the <template> itself
+                // is lost. Warn the developer so silent failure is avoided.
+                if (element instanceof HTMLTemplateElement && element.hasAttribute(StandardDirectiveName.V_IF)) {
+                    console.warn('[ichigo.js] <template> cannot combine v-for and v-if. ' +
+                        'The v-if will be ignored. Move v-if to an inner element, ' +
+                        'or replace <template> with a regular element.', element);
+                }
                 // For v-for template element: only process v-for and :key
                 // Other attributes will be processed when child VNodes are created for cloned elements
                 attributes.push(element.getAttributeNode(StandardDirectiveName.V_FOR));