VueJS DOM 问题答案

【问题标题】：VueJS DOM issueVueJS DOM 问题
【发布时间】：2019-02-12 12:27:50
【问题描述】：

我正在寻找一种使用 VueJS 使可嵌套的 dom 元素可拖动的方法。到目前为止取得了很多成就。但是，拖放后似乎有些元素正在消失。

谁能看一下并指导我出了什么问题？

<script type="text/x-template" id="template-drag">
  <draggable v-model="nodes" :options="{group: { name:'group'}}" class="draggable">
    <template v-for="element in children">
      <element-type :attrs="element"><draggable-nested :children="element.children"/></element-type>
    </template>
  </draggable>
</script>

JSFiddle 链接：https://jsfiddle.net/minuwan/gc5xjLru/

【问题讨论】：

您需要一个key 才能让 Vue 正确地将数据关联到 DOM 对象。
@RoyJ 问题是 '
您可以将key 放在element 上。但是，这仍然不能阻止事物消失。
@RoyJ 我也试过了。我将模板标签转换为 div 并尝试过。还是一样。
问题似乎出在draggable-nested。如果您将其取出并替换为{{element.id}}，则行为正常。

标签： jquery css html vue.js vuejs2

【解决方案1】：

看起来您只是缺少空任务数组。（以及 Roy 提到的可拖动嵌套问题）

如果为每个对象定义它，则允许将其移入。

为原始 jsfiddle 示例更新了代码 sn-p

<script type="text/x-template" id="template-drag">
  <draggable :element="'ul'" :list="tasks" class="draggable" :options="{group:{ name:'group'}}">
    <template v-for="el in children" :key="el.name">
      <p>{{el.name}}</p>
            <element-type :attrs="el"><draggable-nested :children="el.children"/></element-type>
    </template>
  </draggable>
</script>

【讨论】：

啊哈……明白了……就是这样。但是在我复杂的 JSFiddle 中，我做了同样的事情，但不知道出了什么问题。请你看一下好吗？ jsfiddle.net/minuwan/gc5xjLru[这是没有按照你说的做的版本]。
我认为问题可能在于您使用的是 v-model。我已更新答案以包含代码：jsfiddle.net/zbythjoa