fix: Dependent field values not saved on form submission (#4) (#12)

* fix: add ref attribute and fix fill method for form submission

- Added :ref="'field-' + field.attribute" to child components in template
- Fixed fill() method to handle Vue 3's array-based refs in v-for loops
- Improved :key binding to use field.attribute for better component tracking
- Added debug logging to fill() method

* docs: update changelog and version for v1.0.13

Author: iamgerwin

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to `nova-dependency-container` will be documented in this file.
 
+## [1.0.13] - 2025-11-25
+
+### Fixed
+- Fixed dependent field values not being saved on form submission
+- Added missing `ref` attribute to child components in template for proper Vue component referencing
+- Fixed `fill()` method to handle Vue 3's array-based refs in v-for loops
+
+### Changed
+- Updated template to use `:ref="'field-' + field.attribute"` for each child field
+- Updated `fill()` method to extract first element when ref is an array (Vue 3 behavior)
+- Improved `:key` binding to use `field.attribute` for better component tracking
+
+### Technical
+- In Vue 3, refs created in v-for loops are stored as arrays, not single elements
+- The fill method now correctly accesses `$refs[refKey][0]` when the ref is an array
+
 ## [1.0.12] - 2025-11-25
 
 ### Fixed

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "iamgerwin/nova-dependency-container",
-    "version": "1.0.12",
+    "version": "1.0.13",
     "description": "A Laravel Nova 4 and 5 field container allowing to depend on other fields values",
     "keywords": [
         "laravel",

dist/js/field.js

@@ -168,6 +168,7 @@ This ensures that changing a field in Overlay Item #1 doesn't affect the depende
 
 ## Version History
 
+- **1.0.13**: Fixed dependent field values not being saved on form submission
 - **1.0.12**: Added DOM-based watching for Flexible fields where Nova events don't fire
 - **1.0.11**: Fixed regex patterns to support nova-flexible-content's random key format
 - **1.0.10**: Fixed FieldServiceProvider not registering assets with Nova

docs/flexible-field-support.md

@@ -2,7 +2,8 @@
   <div v-show="isVisible" :class="containerClasses">
     <component
       v-for="(field, index) in field.fields"
-      :key="index"
+      :key="field.attribute || index"
+      :ref="'field-' + field.attribute"
       :is="`form-${field.component}`"
       :resource-name="resourceName"
       :resource-id="resourceId"
@@ -690,15 +691,30 @@ export default {
     },
 
     fill(formData) {
+      console.log('[NovaDependencyContainer] fill() called, isVisible:', this.isVisible);
+
       if (!this.isVisible) {
+        console.log('[NovaDependencyContainer] Not visible, skipping fill');
         return;
       }
 
       if (this.field.fields) {
         this.field.fields.forEach(field => {
-          const fieldComponent = this.$refs[`field-${field.attribute}`];
+          const refKey = `field-${field.attribute}`;
+          let fieldComponent = this.$refs[refKey];
+
+          // In Vue 3, refs in v-for are stored as arrays
+          if (Array.isArray(fieldComponent)) {
+            fieldComponent = fieldComponent[0];
+          }
+
+          console.log('[NovaDependencyContainer] Filling field:', field.attribute, 'component:', fieldComponent);
+
           if (fieldComponent && typeof fieldComponent.fill === 'function') {
             fieldComponent.fill(formData);
+            console.log('[NovaDependencyContainer] Field filled:', field.attribute);
+          } else {
+            console.log('[NovaDependencyContainer] Could not fill field:', field.attribute, 'ref not found or no fill method');
           }
         });
       }