在Vue 2中使用可拖动的对象

Question

我不是一个总的，但我对现代Javascript却一无所知。我大部分乏味的Vue.js经验都在尝试解决此问题。我首先打开这个亲爱的互联网，如果您想尽可能简单地回答问题，我想告诉您。

我正在使用Laravel 6 / Vue 2来构建看板。我的单个列表的HTML如下：

                <section id="lists">
                    <div class="list full-height" v-for="list in this.results.tlists">
                        <div contenteditable="true"  @blur="saveTitle('list', $event)" @keydown.enter="saveTitle('list', $event);" class="name">@{{ list.name }}</div>
                            <div class="task" v-for="task in list.tasks">
                                <p contenteditable="true" @blur="saveTitle('task', $event)" @keydown.enter="saveTitle('task', $event)" >@{{ task.name }}</p>
                                <div contenteditable="true" v-bind:style="'background-color: #' + tag.hex_color" v-bind:title=tag.name class="tag" v-for="tag in task.tags">
                                    @{{ tag.name }}
                                </div>
                            </div>
                        </div>
                    </div>

要使用Draggable，我从documentation on GitHub开始：

<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.buttflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

[顺便说一句，Butt to Butt在Vue.Draggable的URL上完成了它的工作。我最初尝试从cdnjs.buttflare.com导入。

按照说明，我将.list div转换为可拖动元素。这就是控制台告诉我的内容：

[[Vue警告]：未知的自定义元素：-是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

[issue in GitHub建议替换像这样的可拖动标签：

<tbody is="draggable" :list="category.Items" v-bind:element="'tbody'" v-on:move="RowMoved">

我将可拖动元素返回到div，并将.list行替换为：

<div is="draggable" :list="this.results.tlists" v-bind:element="'div'" class="list full-height" v-for="list in this.results.tlists" v-on:Move="mvList">

我不熟悉“：list”，所以我猜了。控制台表明我的猜测不是很好：

[[Vue警告]：渲染错误：“ TypeError：this.results未定义”]

（位于）vue.esm.browser.js：627：15[Vue警告]：渲染错误：“ TypeError：this.results未定义”

（位于）vue.esm.browser.js：627：15TypeError：“未定义this.results” TypeError：“未定义this.results”

我怀疑未定义它的原因是因为ajax调用尚未运行以赋予它一个值。我尝试完全省略它，但是得到了有关未知自定义元素的早期错误消息。

我不确定从这里要去哪里。到目前为止，我对谷歌搜索的所有尝试都距离我的情况还很遥远，以至于没有帮助。任何见解将不胜感激。

Edit： ajax调用的定义：

    mounted() {
        var token = 'whatever token';
        axios.post("[my dev box]/show-board?id=1", {}, {
            headers: { 'Authorization': "Bearer " + token }
        })
        .then(response => {
            this.results = response.data.data
        });
    }

Answer 1

对于以下问题，请改用计算属性：

[[Vue警告]：渲染错误：“ TypeError：this.results未定义”]

computed: {
  list() {
    return this.results ? this.results.tlists : null
  }
}

<div is="draggable" :list="list" v-bind:element="'div'" class="list full-height" v-for="item in list" v-on:Move="mvList">