Vue.Draggable интеграция - PullRequest
Новая
       24

Vue.Draggable интеграция

0 голосов
/ 03 июня 2019

Я занимаюсь обслуживанием веб-приложения, использующего Vue, и пытаюсь интегрировать 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. Вывод на консоль недостаточно полезен для меня, чтобы понять, в чем дело.

Есть ли у кого-нибудь понимание или руководство относительно того, что здесь происходит?

...