如何使用嵌套列表

Question

这里什么时候能够捡到V-模型Vue.js可拖动的是我的Vue在模板{{数据

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

    <div class="drag"> 
     <h2>List 1 Draggable</h2> 
     <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> 

数据呈现| tojson |安全}}只是看起来像：

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

现在我收到此错误

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

所以我不认为它喜欢我如何使用V模型。我在我的代码基础上的这个例子：https://jsfiddle.net/dede89/32ao2rpm/它在其V模型标签中使用原始子名称，但我不能这样做。那么我应该怎么做？ 谢谢！

Answer 1

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

<li v-for="(object,category) in data"> 
       <h3>${ object.name }</h3> 
       <draggable v-bind:id="object.name" :id="'category-' + category" v-model="object.items" :move="checkMove" class="dragArea" :options="{group:'items'}"> 
        <div v-for="(item,key) in object.items" :id="item.id" style="border-style: solid;height:50px;"> 
         <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"}}}