Question

我正在使用Vue的Web应用程序上进行维护，并且试图集成Vue.Draggable以提供一些拖放功能。

<template>
  <ul>
    <draggable :list="list">
      <li v-for="element in list">
        {{element.id}}
      </li>
    </draggable>
  </ul>

</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: {
      draggable,
    },

    data() {
      return {
        list: [
                {"id":"a517e0ee-9a53-457b-b619-383ab005c970"}
              ]
      }
    }
  }
</script>

我没有在页面上得到任何输出，并且通过这种方法在控制台中遇到了多个错误。

[Vue warn]: Error in render function:   (found in <Draggable>)
TypeError: Cannot convert undefined or null to object
    at keys (<anonymous>)
    at getComponentAttributes (eval at <anonymous> (app.js:5689), <anonymous>:2829:29)
    at Proxy.render (eval at <anonymous> (app.js:5689), <anonymous>:2921:22)
    at VueComponent.Vue._render (eval at <anonymous> (app.js:723), <anonymous>:3518:22)
    at VueComponent.updateComponent (eval at <anonymous> (app.js:723), <anonymous>:2095:22)
    at Watcher.get (eval at <anonymous> (app.js:723), <anonymous>:2414:25)
    at new Watcher (eval at <anonymous> (app.js:723), <anonymous>:2397:12)
    at mountComponent (eval at <anonymous> (app.js:723), <anonymous>:2109:17)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:7156:10)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:9157:16)

我已经尝试过在Vue.Draggable页面上指定且没有很多选项的情况下进行此操作，包括:keys属性。

前端不是我的舒适区域，Vue对我来说并不陌生，所以我很可能在这里错过了一些非常简单的事情。我只是将这个问题简化为一套越来越简单的代码，而我没有主意。

值得一提的是，此页面与常规Vue功能（包括v-model绑定和v-if条件在多个地方）配合使用非常好。在我介绍draggable组件之前，此示例列表显示良好。控制台输出不足以帮助我理解问题所在。

有人对这里发生的事情有任何见识或指导吗？

Vue可拖曳整合

0 个答案: