Vue draggable works for whole group but not for each item

Question

The code below allows dragging the groups in toListFetchRouteA1:

<draggable id="first" data-source="juju" :list="toListFetchRouteA1" class="list-group" draggable=".item" group="a">
   <div class="list-group-item item" v-for="teamfetch in toListFetchRouteA1" :key="teamfetch.id">
      <div v-for="personame in teamfetch.Team_player_sessions" :key="personame.id">
         {{personame.Player.Person.first_name}}
      </div>
   </div>
</draggable>

I am trying to allow dragging each person name rather than by group, so I changed :list="toListFetchRouteA1" into :list="teamfetch.Team_player_sessions" (shown below), but it throws an error: Cannot read property 'Team_player_sessions' of undefined".

<draggable id="first" data-source="juju" :list="teamfetch.Team_player_sessions" class="list-group" draggable=".item" group="a">
  <div v-for="teamfetch in toListFetchRouteA1" :key="teamfetch.id">
     <div  class="list-group-item item" v-for="personame in teamfetch.Team_player_sessions" :key="personame.id"> 
         {{personame.Player.Person.first_name}} 
      </div>
  </div>
</draggable>

It does not drag as well. Is there a way to make div v-for="personame in teamfetch.Team_player_sessions draggable for personname?

Answer 1

The error occurs because teamfetch is out of scope. It was declared on the inner v-for but used in the outer element.

You could make the person names draggable by wrapping them in a second draggable (assuming you want the groups themselves and the names within the groups to be draggable):

<draggable :list="toListFetchRouteA1" class="list-group" draggable=".item" group="a">
  <div class="list-group-item item" v-for="teamfetch in toListFetchRouteA1" :key="teamfetch.id">

    <!-- 2nd draggable for persons -->
    <draggable :list="teamfetch.Team_player_sessions" draggable=".person">
      <div v-for="personame in teamfetch.Team_player_sessions" :key="personame.id" class="person">
        {{personame.Player.Person.first_name}}
      </div>
    </draggable>

  </div>
</draggable>

new Vue({
  el: '#app',
  data: () => ({
    toListFetchRouteA1: [
      {
        id: 1,
        Team_player_sessions: [
          {
            id: 100,
            Player: {
              Person: {
                first_name: 'john'   
              }
            }
          }
        ]
      },
      {
        id: 2,
        Team_player_sessions: [
          {
            id: 200,
            Player: {
              Person: {
                first_name: 'adam'   
              }
            }
          },
          {
            id: 201,
            Player: {
              Person: {
                first_name: 'allen'
              }
            }
          }
        ]
      },
      {
        id: 3,
        Team_player_sessions: [
          {
            id: 300,
            Player: {
              Person: {
                first_name: 'dave'
              }
            }
          },
          {
            id: 301,
            Player: {
              Person: {
                first_name: 'dylan'
              }
            }
          }
        ]
      },
    ]
  }),
})

.item {
  background: #eee;
  margin: 2px;
  padding: 10px;
}

.person {
  background: #ccc;
  margin: 2px;
}

<script src="https://unpkg.com/[email protected]"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

<div id="app">
  <draggable :list="toListFetchRouteA1" class="list-group" draggable=".item" group="a">
    <div class="list-group-item item" v-for="teamfetch in toListFetchRouteA1" :key="teamfetch.id">
        <draggable :list="teamfetch.Team_player_sessions" draggable=".person">
          <div v-for="personame in teamfetch.Team_player_sessions" :key="personame.id" class="person">
            {{personame.Player.Person.first_name}}
          </div>
        </draggable>
    </div>
  </draggable>

  <pre>{{toListFetchRouteA1}}</pre>
</div>