编辑
我尝试根据@Amaarrockz 的反馈创建一个简单的沙箱，但我遇到的问题似乎仍然出现：
<div id="app">
<ul>
<li v-for="stepTitle in collections.stepTitles">
{{ stepTitle.name }}
<draggable tag="ol" v-model="collections.children">
<li v-for="child in collections.children">{{ child.step }}</li>
</draggable>
</li>
</ul>
</div>
Vue.use('draggable');
var collection = {
"stepTitles": [{
"name": "Step 1",
"id": 1
}, {
"name": "Step 2",
"id": 2
}, {
"name": "Step 3",
"id": 3
}],
"children": [{
"parentID": 1,
"step": "Child 1"
},
{
"parentID": 2,
"step": "Child 1"
},
{
"parentID": 2,
"step": "Child 2"
},
{
"parentID": 2,
"step": "Child 3"
},
{
"parentID": 3,
"step": "Child 1"
},
{
"parentID": 3,
"step": "Child 2"
}
]
};
new Vue({
el: '#app',
data: {
collections: collection
}
});
我想要的最终结果应该是：
- 第 1 步（不可拖动）
- 孩子 1 （可拖动）
- 第 2 步（不可拖动）
- 孩子 1 （可拖动）
- 孩子 2 （可拖动）
- 孩子 3 （可拖动）
- 第 3 步（不可拖动）
- 孩子 1 （可拖动）
- 孩子 2 （可拖动）
孩子只能延伸到 1 层，并且可以在各自的父母内移动。
<draggable>我已经将其缩减为这样一个事实，即在 parent 内部渲染 a 似乎存在问题<ul>。v-for如果我创建一个使用父变量的二维 JSON 数组，例如stepTitle，它会出现关于stepTitle is not defined. 如果我创建一个一维 JSON 数组并使用不同的v-for变量，它不会正确呈现 HTML。
我到处搜索具有嵌套可拖动对象的示例，但我发现的所有示例都显示父对象是可拖动的，这不是我想要的结果。此外，孩子能够成为父母，这也不是我想要的。
不正确的渲染告诉我我做错了什么，但是 vue-draggable 在渲染 children 时是否存在<draggable>问题<ul>？
原帖
我在使用 vue.draggable 时遇到了一个有趣的问题，我花了几个小时试图弄清楚。
一般概念是我有一个包含嵌套数组的数组。这是数据：
"steps": [{
"name": "Title 1",
"steps": ["Sub step 1"]
}, {
"name": "Title 2",
"steps": ["Sub step 1", "Sub step 2", "Sub step 3"]
}, {
"name": "Title 3",
"steps": ["Sub step 1", "Sub step 2"]
}]
它应该呈现如下内容：
目标是让这些子步骤可拖动并相应地调整 Vue 数组。但是，当我引入<draggable>标签时，代码会中断：
属性或方法“项目”未在实例上定义，但在渲染期间被引用。
这是上下文的完整代码：
HTML
<ul class="steps-section-added">
<li class="list-group" v-for="(item, index) in stepSections" :key="item.stepSectionTitle" v-on:remove="removeAddedStepSection(index)">
<div class="row">
<div class="col-12">
<div class="ist-group-item list-group-item-steps-header" style="display: table;width: 100%;">{{ item.stepSectionName }}
<span>
<button class="btn btn-outline-success-white float-right d-flex justify-content-center align-content-between ml-2" v-on:click="removeAddedStepSection(index)"><span class="material-icons">delete</span></button>
<button class="btn btn-outline-success-white float-right d-flex justify-content-center align-content-between" v-on:click="editAddedStepSection(index)"><span class="material-icons">edit</span></button>
</span>
</div>
<div>
<!-- Code breaks somewhere here-->
<draggable v-model="item.steps" tag="ol" @start="drag=true" @end="drag=false" style="padding-left: 0px;">
<li class="recipe-list-group-item list-group-item list-group-item-steps-body" v-for="t in item.steps">{{ t.stepText }}</li>
</draggable>
</div>
</div>
</div>
</li>
</ul>
Vue 应用程序
Vue.use('draggable');
var stepsVM = new Vue({
el: '#step-section-ingredients',
data: {
steps: [],
stepSections: [],
stepSectionTitle: '',
drag: false
},
methods: {
addNewStep: function () {
//
},
removeTextRow: function (index) {
//
},
addNewStepSection: function () {
//
},
removeAddedStepSection: function (index) {
//
},
editAddedStepSection: function (index) {
//
}
}
});
如果我将<draggable>标签替换为<ol>它会正确呈现但嵌套组件不可拖动。一旦我介绍了可拖动标签，它就会中断。从数小时的实验来看，我认为错误是指v-for="t in item.steps">. 如果是这种情况，我该item.steps如何工作？
任何指导将不胜感激 ：）