@mongoosejs/studio 0.5.4 → 0.5.6

package/frontend/src/document-details/document-details.js

@@ -286,6 +286,34 @@ module.exports = app => app.component('document-details', {
 
       return this.virtualSearchMatchSet.has(virtual.name);
     },
+    getSearchMatchParts(text) {
+      const normalizedQuery = typeof this.searchQuery === 'string' ? this.searchQuery.trim() : '';
+      if (!normalizedQuery) {
+        return [{ text, matched: false }];
+      }
+
+      const lowerText = String(text).toLowerCase();
+      const lowerQuery = normalizedQuery.toLowerCase();
+      const parts = [];
+      let position = 0;
+      let matchIndex = lowerText.indexOf(lowerQuery, position);
+
+      while (matchIndex !== -1) {
+        if (matchIndex > position) {
+          parts.push({ text: text.slice(position, matchIndex), matched: false });
+        }
+        const matchEnd = matchIndex + normalizedQuery.length;
+        parts.push({ text: text.slice(matchIndex, matchEnd), matched: true });
+        position = matchEnd;
+        matchIndex = lowerText.indexOf(lowerQuery, position);
+      }
+
+      if (position < text.length) {
+        parts.push({ text: text.slice(position), matched: false });
+      }
+
+      return parts.length > 0 ? parts : [{ text, matched: false }];
+    },
     isVirtualFieldCollapsed(fieldName) {
       return this.collapsedVirtuals.has(fieldName);
     },

package/frontend/src/document-details/document-property/document-property.html

@@ -2,8 +2,7 @@
   <!-- Collapsible Header -->
   <div
     @click="toggleCollapse"
-    class="p-1 cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out"
-    :class="{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-muted': !highlight }"
+    class="p-1 cursor-pointer flex items-center justify-between border-b border-edge bg-slate-100 hover:bg-muted transition-colors duration-200 ease-in-out"
     style="overflow: visible; position: relative;"
   >
     <div class="flex items-center" >
@@ -16,11 +15,32 @@
       >
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
       </svg>
-      <span class="font-medium text-content">{{path.path}}</span>
+      <span class="font-medium text-content">
+        <span
+          v-for="(part, index) in pathNameParts"
+          :key="index"
+          :class="{ 'font-bold': part.matched }">{{ part.text }}</span>
+      </span>
       <span class="ml-2 text-sm text-content-tertiary">({{(path.instance || 'unknown').toLowerCase()}})</span>
+      <div v-if="path.instance === 'Array' && canUseArrayTableView" class="ml-3 inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold">
+        <button
+          type="button"
+          class="rounded-full px-2.5 py-0.5 transition"
+          :class="arrayDetailViewMode === 'list' ? 'bg-merlot-700 text-white shadow' : 'text-content-secondary hover:text-content'"
+          @click.stop="setArrayDetailViewMode('list')">
+          List
+        </button>
+        <button
+          type="button"
+          class="rounded-full px-2.5 py-0.5 transition"
+          :class="arrayDetailViewMode === 'table' ? 'bg-merlot-700 text-white shadow' : 'text-content-secondary hover:text-content'"
+          @click.stop="setArrayDetailViewMode('table')">
+          Table
+        </button>
+      </div>
       <div v-if="isGeoJsonGeometry" class="ml-3 inline-flex items-center gap-2">
         <div class="inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold">
-      <button
+          <button
             type="button"
             class="rounded-full px-2.5 py-0.5 transition"
             :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'"
@@ -153,48 +173,20 @@
       </component>
     </div>
     <div v-else>
-      <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->
-      <!-- Special handling for truncated arrays -->
-      <div v-if="isArray && shouldShowTruncated" class="w-full">
-        <div class="mt-2">
-          <div
-            v-for="(item, index) in truncatedArrayItems"
-            :key="index"
-            class="mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600">
-            <div class="absolute -left-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600">{{ index }}</div>
-            <div v-if="arrayUtils.isObjectItem(item)" class="flex flex-col gap-1 mt-1 px-2">
-              <div
-                v-for="key in arrayUtils.getItemKeys(item)"
-                :key="key"
-                class="flex items-start gap-2 text-xs font-mono">
-                <span class="font-semibold text-gray-600 flex-shrink-0 min-w-[80px]">{{ key }}:</span>
-                <span class="text-gray-800 break-words whitespace-pre-wrap flex-1">{{ arrayUtils.formatItemValue(item, key) }}</span>
-              </div>
-            </div>
-            <div v-else class="text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1">{{ arrayUtils.formatValue(item) }}</div>
-          </div>
-          <div class="mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100">
-            <div class="text-xs py-1.5 px-2 font-mono text-content-tertiary italic break-words whitespace-pre-wrap mt-1">
-              ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}
-            </div>
-          </div>
-        </div>
-        <button
-          @click="toggleValueExpansion"
-          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"
-        >
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-          </svg>
-          Show all {{ arrayValue.length }} items
-        </button>
-      </div>
+      <!-- Arrays own their truncation and array search behavior in detail-array. -->
+      <component
+        v-if="isArray"
+        :is="getComponentForPath(path)"
+        :value="rawValue"
+        :viewMode="propertyDetailViewMode"
+        :truncate="needsTruncation"
+        @updated="renderedValue = $event"></component>
       <!-- Non-array truncated view -->
       <div v-else-if="shouldShowTruncated && !isArray" class="relative">
         <div class="text-content-secondary whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</div>
         <button
           @click="toggleValueExpansion"
-          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"
+          class="mt-2 text-merlot-700 hover:text-merlot-900 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"
         >
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
@@ -207,11 +199,11 @@
         <component
           :is="getComponentForPath(path)"
           :value="rawValue"
-          :viewMode="isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)"
+          :viewMode="propertyDetailViewMode"
           @updated="renderedValue = $event"></component>
         <button
           @click="toggleValueExpansion"
-          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"
+          class="mt-2 text-merlot-700 hover:text-merlot-900 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"
         >
           <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
@@ -224,7 +216,7 @@
         <component
           :is="getComponentForPath(path)"
           :value="rawValue"
-          :viewMode="isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)"
+          :viewMode="propertyDetailViewMode"
           @updated="renderedValue = $event"></component>
       </div>
     </div>

package/frontend/src/document-details/document-property/document-property.js

@@ -11,6 +11,7 @@ const appendCSS = require('../../appendCSS');
 appendCSS(require('./document-property.css'));
 
 const UNSET = Symbol('unset');
+const { isArrayOfObjects } = require('../../array-utils');
 
 module.exports = app => app.component('document-property', {
   template,
@@ -22,6 +23,8 @@ module.exports = app => app.component('document-property', {
       renderedValue: UNSET,
       isCollapsed: false, // Start uncollapsed by default
       isValueExpanded: false, // Track if the value is expanded
+      /** 'list' | 'table' for array-of-objects display and editing */
+      arrayDetailViewMode: 'list',
       detailViewMode: 'text',
       copyButtonLabel: 'Copy',
       copyResetTimeoutId: null,
@@ -34,7 +37,7 @@ module.exports = app => app.component('document-property', {
       this.copyResetTimeoutId = null;
     }
   },
-  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid', 'highlight'],
+  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid', 'highlight', 'searchQuery'],
   computed: {
     isDatePath() {
       return this.path?.instance === 'Date';
@@ -97,18 +100,6 @@ module.exports = app => app.component('document-property', {
       }
       return this.valueAsString;
     },
-    truncatedArrayItems() {
-      if (this.isArray && this.needsTruncation && !this.isValueExpanded) {
-        return this.arrayValue.slice(0, 2);
-      }
-      return [];
-    },
-    remainingArrayCount() {
-      if (this.isArray && this.needsTruncation && !this.isValueExpanded) {
-        return this.arrayValue.length - 2;
-      }
-      return 0;
-    },
     isGeoJsonGeometry() {
       const value = this.getValueForPath(this.path.path);
       return value != null
@@ -128,6 +119,34 @@ module.exports = app => app.component('document-property', {
     isMultiPolygon() {
       const value = this.getValueForPath(this.path.path);
       return this.isGeoJsonGeometry && value.type === 'MultiPolygon';
+    },
+    arrayPathCurrentValue() {
+      if (!this.path || this.path.instance !== 'Array') {
+        return null;
+      }
+      if (this.editting) {
+        return this.getEditValueForPath(this.path);
+      }
+      return this.getValueForPath(this.path.path);
+    },
+    canUseArrayTableView() {
+      const v = this.arrayPathCurrentValue;
+      return Array.isArray(v) && isArrayOfObjects(v);
+    },
+    propertyDetailViewMode() {
+      if (this.isDatePath) {
+        return this.dateViewMode;
+      }
+      if (this.isObjectIdPath) {
+        return this.objectIdViewMode;
+      }
+      if (this.path?.instance === 'Array') {
+        return this.arrayDetailViewMode;
+      }
+      return this.detailViewMode;
+    },
+    pathNameParts() {
+      return this.getSearchMatchParts(this.path?.path || '', this.searchQuery);
     }
   },
   watch: {
@@ -144,12 +163,56 @@ module.exports = app => app.component('document-property', {
       if (newValue && this.isGeoJsonGeometry) {
         this.detailViewMode = 'map';
       }
+    },
+    canUseArrayTableView(can) {
+      if (!can && this.arrayDetailViewMode === 'table') {
+        this.arrayDetailViewMode = 'list';
+      }
+    },
+    'path.path'() {
+      this.arrayDetailViewMode = 'list';
     }
   },
   methods: {
+    getSearchMatchParts(text, query) {
+      const normalizedQuery = typeof query === 'string' ? query.trim() : '';
+      if (!normalizedQuery) {
+        return [{ text, matched: false }];
+      }
+
+      const lowerText = String(text).toLowerCase();
+      const lowerQuery = normalizedQuery.toLowerCase();
+      const parts = [];
+      let position = 0;
+      let matchIndex = lowerText.indexOf(lowerQuery, position);
+
+      while (matchIndex !== -1) {
+        if (matchIndex > position) {
+          parts.push({ text: text.slice(position, matchIndex), matched: false });
+        }
+        const matchEnd = matchIndex + normalizedQuery.length;
+        parts.push({ text: text.slice(matchIndex, matchEnd), matched: true });
+        position = matchEnd;
+        matchIndex = lowerText.indexOf(lowerQuery, position);
+      }
+
+      if (position < text.length) {
+        parts.push({ text: text.slice(position), matched: false });
+      }
+
+      return parts.length > 0 ? parts : [{ text, matched: false }];
+    },
+    setArrayDetailViewMode(mode) {
+      this.arrayDetailViewMode = mode;
+      if (mode === 'table') {
+        if (this.isCollapsed) {
+          this.isCollapsed = false;
+        }
+      }
+    },
     setDetailViewMode(mode) {
       this.detailViewMode = mode;
-      
+
       // When switching to map view, expand the container and value so the map is visible
       if (mode === 'map' && this.isGeoJsonGeometry) {
         if (this.isCollapsed) {
@@ -220,6 +283,7 @@ module.exports = app => app.component('document-property', {
       if (path.instance === 'Array') {
         props.path = path;
         props.schemaPaths = this.schemaPaths;
+        props.viewMode = this.arrayDetailViewMode === 'table' ? 'table' : 'json';
       }
       return props;
     },

package/frontend/src/edit-array/edit-array.html

@@ -1,9 +1,144 @@
 <div class="w-full">
-  <ace-editor
-    :value="arrayStr"
-    @input="onEditorInput"
-    mode="json"
-    :line-numbers="true"
-    class="min-h-[300px]"
-  />
-</div>
+  <div v-if="!useTableEditor">
+    <ace-editor
+      :value="arrayStr"
+      @input="onEditorInput"
+      mode="json"
+      :line-numbers="true"
+      class="min-h-[300px]"
+    />
+  </div>
+  <div v-else class="overflow-hidden rounded-lg border border-edge bg-surface">
+    <div class="border-b border-edge bg-slate-50/90 px-3 py-2.5">
+      <div class="flex flex-col gap-2 lg:flex-row lg:items-center lg:gap-4">
+        <div class="flex flex-wrap items-stretch gap-2">
+          <button
+            type="button"
+            class="rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-text shadow-sm hover:bg-primary-hover"
+            @click="addRow">
+            + Row
+          </button>
+          <div class="flex min-w-0 max-w-full sm:max-w-md">
+            <input
+              id="edit-array-new-column"
+              v-model="newColumnKeyInput"
+              type="text"
+              class="min-w-0 flex-1 rounded-l-md border border-r-0 border-edge bg-surface px-2.5 py-1.5 text-xs font-mono text-content placeholder:text-content-tertiary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+              placeholder="New field name"
+              autocomplete="off"
+              @keyup.enter="addColumn"
+            />
+            <button
+              type="button"
+              class="shrink-0 rounded-r-md border border-edge bg-slate-100 px-3 py-1.5 text-xs font-semibold text-content hover:bg-slate-200"
+              @click="addColumn">
+              Add field
+            </button>
+          </div>
+        </div>
+        <p class="text-[11px] leading-snug text-content-tertiary lg:ml-auto lg:max-w-[18rem] lg:text-right">
+          Each cell is JSON. Clear a cell to remove that field from the row.
+        </p>
+      </div>
+      <p v-if="newColumnKeyError" class="mt-2 text-xs font-medium text-red-600">{{ newColumnKeyError }}</p>
+    </div>
+
+    <div v-if="arrayValue.length > 0" class="border-b border-edge bg-slate-50/50 px-3 py-2">
+      <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+        <div class="relative min-w-0 flex-1 sm:max-w-md">
+          <input
+            v-model="arraySearchQuery"
+            type="search"
+            autocomplete="off"
+            aria-label="Search rows in this array"
+            placeholder="Search rows…"
+            class="w-full rounded-md border border-edge bg-surface py-1.5 pl-2 pr-16 text-xs text-content placeholder:text-content-tertiary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+          />
+          <button
+            v-if="arraySearchNormalized"
+            type="button"
+            class="absolute right-1 top-1/2 -translate-y-1/2 rounded px-1.5 py-0.5 text-[11px] text-content-tertiary hover:bg-slate-200 hover:text-content"
+            title="Clear search"
+            @click="arraySearchQuery = ''">
+            Clear
+          </button>
+        </div>
+        <span v-if="arraySearchNormalized" class="shrink-0 text-xs text-content-tertiary">
+          {{ filteredTableRows.length }} of {{ arrayValue.length }} shown
+        </span>
+      </div>
+    </div>
+
+    <div v-if="arrayValue.length === 0" class="px-4 py-10 text-center text-sm text-content-secondary">
+      No rows yet. Use <span class="font-medium text-content">+ Row</span> or enter a field name and choose <span class="font-medium text-content">Add field</span>.
+    </div>
+
+    <div
+      v-else-if="filteredTableRows.length === 0"
+      class="px-4 py-8 text-center text-sm text-content-secondary">
+      No rows match "{{ arraySearchQuery.trim() }}".
+    </div>
+
+    <div v-else class="overflow-x-auto">
+      <table class="min-w-full text-left text-xs font-mono">
+        <thead class="border-b border-edge bg-slate-100 text-content-secondary">
+          <tr>
+            <th scope="col" class="w-24 border-r border-edge px-2 py-2 text-left text-[11px] font-semibold uppercase tracking-wide">
+              Actions
+            </th>
+            <th
+              v-for="key in tableColumnKeys"
+              :key="key"
+              scope="col"
+              class="border-r border-edge px-3 py-2 text-left text-xs font-semibold last:border-r-0 min-w-[8rem] whitespace-nowrap">
+              {{ key }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-edge bg-surface">
+          <tr v-for="entry in filteredTableRows" :key="entry.index" class="hover:bg-slate-50/60">
+            <td class="align-middle border-r border-edge p-2">
+              <div class="flex flex-col gap-1">
+                <span class="text-center text-[10px] font-medium text-content-tertiary">#{{ entry.index }}</span>
+                <button
+                  type="button"
+                  class="rounded border border-edge bg-surface px-2 py-1 text-[11px] font-medium hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40"
+                  :disabled="entry.index === 0"
+                  title="Move row up"
+                  @click="moveRow(entry.index, -1)">
+                  Up
+                </button>
+                <button
+                  type="button"
+                  class="rounded border border-edge bg-surface px-2 py-1 text-[11px] font-medium hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40"
+                  :disabled="entry.index === arrayValue.length - 1"
+                  title="Move row down"
+                  @click="moveRow(entry.index, 1)">
+                  Down
+                </button>
+                <button
+                  type="button"
+                  class="rounded border border-red-200 bg-surface px-2 py-1 text-[11px] font-medium text-red-700 hover:bg-red-50"
+                  title="Remove this row"
+                  @click="removeRow(entry.index)">
+                  Remove
+                </button>
+              </div>
+            </td>
+            <td
+              v-for="key in tableColumnKeys"
+              :key="key"
+              class="max-w-md min-w-[8rem] border-r border-edge p-1.5 align-top last:border-r-0">
+              <textarea
+                rows="2"
+                class="w-full resize-y rounded border border-edge bg-surface px-2 py-1.5 text-xs text-content focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+                :value="serializeCell(entry.item[key])"
+                @blur="onCellChange(entry.index, key, $event.target.value)"
+              ></textarea>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

package/frontend/src/edit-array/edit-array.js

@@ -2,6 +2,7 @@
 
 const template = require('./edit-array.html');
 const { BSON } = require('mongodb/lib/bson');
+const { isArrayOfObjects, unionKeysForArrayOfObjects, arrayItemMatchesSearch } = require('../array-utils');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply(target, thisArg, argumentsList) {
@@ -12,15 +13,44 @@ const ObjectId = new Proxy(BSON.ObjectId, {
 
 module.exports = app => app.component('edit-array', {
   template: template,
-  props: ['value'],
+  props: {
+    value: {},
+    path: {},
+    schemaPaths: {},
+    /** 'json' (ACE) or 'table' for arrays of plain objects */
+    viewMode: {
+      type: String,
+      default: 'json'
+    }
+  },
   data() {
     return {
-      arrayValue: []
+      arrayValue: [],
+      newColumnKeyInput: '',
+      newColumnKeyError: '',
+      arraySearchQuery: ''
     };
   },
   computed: {
     arrayStr() {
       return JSON.stringify(this.arrayValue, null, 2);
+    },
+    useTableEditor() {
+      return this.viewMode === 'table' && isArrayOfObjects(this.arrayValue);
+    },
+    tableColumnKeys() {
+      return unionKeysForArrayOfObjects(this.arrayValue);
+    },
+    arraySearchNormalized() {
+      return (this.arraySearchQuery || '').trim().toLowerCase();
+    },
+    filteredTableRows() {
+      if (!Array.isArray(this.arrayValue)) {
+        return [];
+      }
+      return this.arrayValue
+        .map((item, index) => ({ item, index }))
+        .filter(({ item }) => arrayItemMatchesSearch(item, this.arraySearchNormalized));
     }
   },
   methods: {
@@ -51,6 +81,78 @@ module.exports = app => app.component('edit-array', {
       } catch (err) {
         this.$emit('error', err);
       }
+    },
+    serializeCell(value) {
+      if (value === undefined) {
+        return '';
+      }
+      return JSON.stringify(value);
+    },
+    onCellChange(rowIndex, key, raw) {
+      const row = this.arrayValue[rowIndex];
+      if (row == null || typeof row !== 'object') {
+        return;
+      }
+      const trimmed = raw.trim();
+      if (trimmed === '') {
+        delete row[key];
+        this.emitUpdate();
+        return;
+      }
+      try {
+        row[key] = JSON.parse(trimmed);
+        this.emitUpdate();
+      } catch (err) {
+        this.$emit('error', err);
+      }
+    },
+    addRow() {
+      const row = {};
+      for (const k of this.tableColumnKeys) {
+        row[k] = null;
+      }
+      this.arrayValue.push(row);
+      this.emitUpdate();
+    },
+    addColumn() {
+      const key = (this.newColumnKeyInput || '').trim();
+      this.newColumnKeyError = '';
+      if (!key) {
+        this.newColumnKeyError = 'Enter a column name.';
+        return;
+      }
+      if (this.tableColumnKeys.includes(key)) {
+        this.newColumnKeyError = 'That column already exists.';
+        return;
+      }
+      if (!Array.isArray(this.arrayValue)) {
+        this.arrayValue = [];
+      }
+      if (this.arrayValue.length === 0) {
+        this.arrayValue.push({ [key]: null });
+      } else {
+        for (const row of this.arrayValue) {
+          if (row != null && typeof row === 'object' && !Array.isArray(row) && row.constructor === Object) {
+            row[key] = null;
+          }
+        }
+      }
+      this.newColumnKeyInput = '';
+      this.emitUpdate();
+    },
+    removeRow(index) {
+      this.arrayValue.splice(index, 1);
+      this.emitUpdate();
+    },
+    moveRow(index, delta) {
+      const j = index + delta;
+      if (j < 0 || j >= this.arrayValue.length) {
+        return;
+      }
+      const copy = this.arrayValue[index];
+      this.arrayValue.splice(index, 1);
+      this.arrayValue.splice(j, 0, copy);
+      this.emitUpdate();
     }
   },
   mounted() {