Vue 可拖动适用于整个组，但不适用于每个项目答案

【问题标题】：Vue draggable works for whole group but not for each itemVue 可拖动适用于整个组，但不适用于每个项目
【发布时间】：2020-06-06 21:17:34
【问题描述】：

下面的代码允许拖动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>

我试图允许拖动每个人的姓名而不是按组拖动，因此我将:list="toListFetchRouteA1" 更改为:list="teamfetch.Team_player_sessions"（如下所示），但它会引发错误：无法读取未定义的属性'Team_player_sessions'" 。

<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>

它也不会拖动。有没有办法让div v-for="personame in teamfetch.Team_player_sessions 可拖动到personname？

【问题讨论】：

标签： vue.js vuedraggable

【解决方案1】：

发生错误是因为teamfetch 超出范围。它在内部 v-for 上声明，但在外部元素中使用。

您可以通过将人名包裹在第二个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/vue@2.6.11"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/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>

【讨论】：