使用嵌套列表时如何为可拖动的 Vue.js 选择 v-model答案

【问题标题】：How to pick v-model for Vue.js draggable when using a nested list使用嵌套列表时如何为可拖动的 Vue.js 选择 v-model
【发布时间】：2017-08-03 23:38:33
【问题描述】：

这是我的 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>

在模板{{ data | tojson | safe }} 中呈现的数据看起来像：

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

现在我收到这个错误

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

所以我不认为它喜欢我使用 v-model 的方式。我的代码基于此示例：https://jsfiddle.net/dede89/32ao2rpm/ 在其 v-model 标签中使用原始儿子名称，但我不能这样做。那么我该怎么做呢？谢谢！

【问题讨论】：

标签： vue.js

【解决方案1】：

我通过更改我的数据对象来解决此问题，以便我可以引用 v-model 上的对象属性。基本上和它在错误中所说的完全一样。具体来说，它看起来像：

<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"
     }
 }}

【讨论】：