[6.x] Fix some reactivity issues (#11775)

Author: jasonvarga

resources/js/components/fieldtypes/grid/ManagesRowMeta.js

@@ -1,12 +1,13 @@
 export default {
     methods: {
-        updateRowMeta(row, value) {
+        updateRowMeta(row, value, previews) {
             this.updateMeta({
                 ...this.meta,
                 existing: {
                     ...this.meta.existing,
                     [row]: clone(value),
                 },
+                previews: previews ? { ...this.meta.previews, [row]: previews } : this.meta.previews,
             });
         },
 

resources/js/components/fieldtypes/replicator/ManagesPreviewText.js

@@ -8,7 +8,8 @@ export default {
                 return config.replicator_preview === undefined ? this.showFieldPreviews : config.replicator_preview;
             });
 
-            return Object.values(previews)
+            return previews
+                .map(([handle, value]) => value)
                 .filter((value) => {
                     if (['null', '[]', '{}', ''].includes(JSON.stringify(value))) return null;
                     return value;

resources/js/components/fieldtypes/replicator/ManagesSetMeta.js

@@ -4,8 +4,8 @@ export default {
     mixins: [ManagesRowMeta],
 
     methods: {
-        updateSetMeta(set, value) {
-            this.updateRowMeta(set, value);
+        updateSetMeta(set, value, previews) {
+            this.updateRowMeta(set, value, previews);
         },
 
         removeSetMeta(set) {

resources/js/components/fieldtypes/replicator/Replicator.vue

@@ -44,7 +44,7 @@
                                     :collapsed="collapsed.includes(set._id)"
                                     :field-path-prefix="fieldPathPrefix || handle"
                                     :has-error="setHasError(index)"
-                                    :previews="previews[set._id]"
+                                    :previews="meta.previews[set._id]"
                                     :show-field-previews="config.previews"
                                     :can-add-set="canAddSet"
                                     @collapsed="collapseSet(set._id)"
@@ -111,7 +111,6 @@ export default {
         return {
             focused: false,
             collapsed: clone(this.meta.collapsed),
-            previews: this.meta.previews,
             fullScreenMode: false,
             provide: {
                 storeName: this.storeName,
@@ -209,9 +208,7 @@ export default {
                 enabled: true,
             };
 
-            this.updateSetPreviews(set._id, {});
-
-            this.updateSetMeta(set._id, this.meta.new[handle]);
+            this.updateSetMeta(set._id, this.meta.new[handle], {});
 
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index)]);
 
@@ -226,17 +223,21 @@ export default {
                 _id: uniqid(),
             };
 
-            this.updateSetPreviews(set._id, {});
-
-            this.updateSetMeta(set._id, this.meta.existing[old_id]);
+            this.updateSetMeta(set._id, this.meta.existing[old_id], {});
 
             this.update([...this.value.slice(0, index + 1), set, ...this.value.slice(index + 1)]);
 
             this.expandSet(set._id);
         },
 
         updateSetPreviews(id, previews) {
-            this.previews[id] = previews;
+            this.updateMeta({
+                ...this.meta,
+                previews: {
+                    ...this.meta.previews,
+                    [id]: previews,
+                },
+            });
         },
 
         collapseSet(id) {
@@ -304,18 +305,6 @@ export default {
         collapsed(collapsed) {
             this.updateMeta({ ...this.meta, collapsed: clone(collapsed) });
         },
-
-        previews: {
-            deep: true,
-            handler(value) {
-                if (JSON.stringify(this.meta.previews) === JSON.stringify(value)) {
-                    return;
-                }
-                const meta = this.meta;
-                meta.previews = value;
-                this.updateMeta(meta);
-            },
-        },
     },
 };
 </script>

resources/js/components/publish/Container.vue

@@ -55,11 +55,11 @@ export default {
     data() {
         return {
             store: usePublishContainerStore(this.name, {
-                blueprint: clone(this.blueprint),
-                values: clone(this.values),
-                extraValues: clone(this.extraValues),
-                meta: clone(this.meta),
-                localizedFields: clone(this.localizedFields),
+                blueprint: this.blueprint,
+                values: this.values,
+                extraValues: this.extraValues,
+                meta: this.meta,
+                localizedFields: this.localizedFields,
                 site: this.site,
                 isRoot: this.isRoot,
                 reference: this.reference,