如何在使用嵌套列表时为Vue.js draggable选择v-model

这是我的Vue

<div id="main">
    <h1>Vue Dragable For</h1>

    <div class="drag">
        <ul>
            <li v-for="category in data">
                <draggable id="category" v-model="category" :move="checkMove" class="dragArea" :options="{group:'people'}">
                    <div v-for="item in category" style="border: 3px;">${ item.name }</div>
                </draggable>
            </li>
        </ul>
    </div>
</div>

    <script>
        var vm = new Vue({
            el: "#main",
            delimiters:['${', '}'],
            data: {{ data | tojson | safe }},
            methods:{
                checkMove: function(evt){
                    console.log(evt.draggedContext.index);
                    console.log(evt.draggedContext.futureIndex);
                    console.log(evt.from.id);
                    console.log(evt.to.id);
                    axios.post('/categorize', {
                        'index': JSON.stringify(evt.draggedContext.index),
                        'futureIndex': JSON.stringify(evt.draggedContext.futureIndex),
                        'from':evt.to.id,
                        'to':evt.from.id,
                    });
                    return true
                }
            }
        });
</script>

现在我得到了这个错误

您将v-model直接绑定到v-for迭代别名。这将无法修改v-for源数组，因为写入别名就像修改函数局部变量。考虑使用对象数组，而不是在对象属性上使用V模型。

所以我认为它不喜欢我使用v型的方式。我的代码基于这个示例：它在v-model标记中使用原始子名称，但我不能这样做。那我该怎么做呢？

---

谢谢

我通过更改数据对象修复了这个问题，这样我就可以在v模型上引用对象属性。基本上就是它在错误中所说的。具体来说，它看起来像：

{"data": {"uncategorized": [{"name": ""}, {"name": "first"}, {"name": "another"}]}}

<li v-for="(object,category) in data">
    <h3>${ object.name }</h3>

    <draggable v-bind:id="object.name"
               v-model="object.items"
               :id="'category-' + category"
               :move="checkMove" class="dragArea"
               :options="{group: 'items'}">

        <div v-for="(item,key) in object.items" :id="item.id">
            <a href="{{ url_for('view',itemid=${ item.id }) }}">
                ${ item.name }
            </a>
        </div>

    </draggable>
</li>

{"data": {
    "category2": {
        "category_id": 2,
        "items": [],
        "name": "category2"
     },
     "category3": {
         "category_id": 3,
         "items": [],
         "name": "category3"
      }, 
     "uncategorized": {
         "category_id": 1,
         "items": [
             { "id": 1, "name": "first!" }
         ],
         "name": "uncategorized"
     }
 }}