[Vuejs]-Dragging and dropping incorrect item from array

by

0👍

When the template is rendered, you are missing ul around the li elements.

Also, {{ terms[0].label } and {{ terms[1].label } should be placed outside of <draggable> element.

Your template should look like this

{{ terms[0].label }}
<draggable
  element="ul"
  v-model="terms[0].term_standards"
  class="dragArea"
  :options="{group:'ITEMS'}"
>
  <li
    v-for="item in terms[0].term_standards"
    :key="item.id">
      {{ item.label }}
  </li>
</draggable>

{{ terms[1].label }}
<draggable
  element="ul"
  v-model="terms[1].term_standards"
  class="dragArea"
  :options="{group:'ITEMS'}"
>
  <li
    v-for="item in terms[1].term_standards"
    :key="item.id">
      {{ item.label }}
  </li>
</draggable>

Leave a comment