从数组中拖放不正确的项目答案

【问题标题】：Dragging and dropping incorrect item from array从数组中拖放不正确的项目
【发布时间】：2019-06-09 22:36:27
【问题描述】：

我正在尝试按照 vue-draggable 文档创建可拖动列表，但是当我拖放一个项目时，正在移动另一个项目。例如，如果我将standard1 拖到Term2 列表中，standard2 最终会出现在第二个列表中。这是怎么回事？

data(){
  return {
    terms: [
      {
        "id": 1,
        "label": "Term1",
        "term_standards": [
          {"id": 1, "label": "standard1"},
          {"id": 2, "label": "standard2"},
        ]
      },
      {
        "id": 2,
        "label": "Term2",
        "term_standards": [
          {"id": 3, "label": "standard3"},
          {"id": 4, "label": "standard4"},
        ]
      },
    ]
  }
}


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

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

【问题讨论】：

当您检查 dom 元素时，您应该看到 1) 在 <li> 周围缺少 ul 元素。您可以通过将 element="ul" 添加到 <draggable> 来解决此问题 2) {{ terms[0].label }} 和 {{ terms[0].label }} 应该在 <draggable> 之外
我已经更新了我的评论

标签： vue.js

【解决方案1】：

渲染模板时，li 元素周围缺少ul。

另外，{{ terms[0].label } 和 {{ terms[1].label } 应该放在 <draggable> 元素之外。

您的模板应如下所示

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

【讨论】：