title: Laravel, VueJS - keeping 2 arrays in sync while dragging & dropping
body: <p>I currently have code referencing vuejs packages to handle dragging &amp; dropping and it IS WORKING.</p>
  <p>Packages:</p>
  <ul>
  <li>src=&quot;//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js&quot;</li>
  <li>src=&quot;//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.19.2/vuedraggable.umd.min.js&quot;</li>
  <li>src=&quot;//unpkg.com/axios/dist/axios.min.js&quot;</li>
  </ul>
  <p>I have a series of checkbox items all bound to a single v-model named &quot;choices.&quot;</p>
  <p>Snippet of template code:</p>
  <pre><code>        &lt;div class=&quot;form-group&quot;&gt;  // One of the labels for the checkboxes...
              &lt;div class=&quot;col-sm-2&quot; style=&quot;text-align: center&quot;&gt;
                  &lt;label class=&quot;control-label&quot;&gt;@lang('messages.fields.category')&lt;/label&gt;
                  @include('v1.parts.tooltip', ['title' =&gt; trans('messages.admin.api.api_info_cat')])
              &lt;/div&gt;
  
              // Other labels for checkboxes not shown
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;  // One of the checkboxes... others not shown
              &lt;div class=&quot;col-sm-2&quot;&gt;
                  &lt;input type=&quot;checkbox&quot; class=&quot;form-control input-sm&quot; v-model=&quot;choices&quot;
                         id=&quot;{{ trans('messages.fields.category') }}&quot;
                         value=&quot;{{ trans('messages.fields.category') }}&quot;
                         name=&quot;category&quot;&gt;
              &lt;/div&gt;
              // Other  checkboxes not shown
  
      &lt;div class=&quot;col-sm-4&quot;&gt;
          &lt;p&gt;
              @lang('messages.admin.api.api_instr2')
          &lt;/p&gt;
  
         // This is the portion to the right of screenshot, populated as boxes are checked
  
          &lt;draggable tag=&quot;ul&quot; v-model=&quot;choices&quot; @start=&quot;drag=true&quot; @end=&quot;drag=false&quot; handle=&quot;.handle&quot;&gt;
              &lt;div class=&quot;list-group-item&quot; v-for=&quot;choice in choices&quot;&gt;
                  @{{ choice }} &lt;i class=&quot;handle fas fa-arrows-alt pull-right&quot;&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/draggable&gt;
  
      &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/UdbaM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UdbaM.png" alt="screenshot of the checkboxes and sortable list" /></a></p>
  <p>The checkbox values are currently human-readable English (though currently using localization) words that, when checked, show up in a list that can then be dragged and dropped for manual sorting.  As the checkboxes are checked and/or the list is sorted, the red text (screenshot) labeled &quot;Event Text&quot; updates.</p>
  <p>I want to keep that functionality (using the human-readable items so that they're displayed) but I also want to have a set of corresponding values in an array that hold single-word names (aka variable names) for easier reference, handles for localization, and other processing in another area of my application.</p>
  <p>So I want two arrays that stay in sync based on the actions that a user takes on the array that is getting dragged &amp; dropped.</p>
  <p>I hope what I'm trying to achieve makes sense.  The alternative--parsing the currently-English words--is possible but will break once localization is introduced because then the displayed words would not be English.</p>
  <p>Thanks in advance.</p>