Question

这是我的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标签中使用原始子名称，但我不能这样做。那我该怎么做呢？谢谢！

Answer 1

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

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

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

1 个答案: