Vue draggable 适用于整个组但不适用于每个项目

Question

下面的代码允许拖动 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"（如下所示），但它会引发错误：Cannot阅读未定义的属性 '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？

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

Vue draggable 适用于整个组但不适用于每个项目

Vue draggable works for whole group but not for each item

vue.js

vuedraggable