0

下面的代码允许将组拖入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？

4

1 回答 1

2

发生错误是因为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>

于 2020-06-07T02:48:16.560 回答