0

我正在对使用 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组件之前，此示例列表显示良好。控制台输出不足以让我理解问题所在。

有没有人对这里发生的事情有一些见解或指导？

4

0 回答 0