如何将div ID添加到v-for列表中的每个元素？

Question

这里是我的Vue

<div class="drag"> 
     <h2>List 1 Draggable</h2> 
     <ul> 
      <li v-for="category in data"> 
       <draggable v-bind:id="category" v-model="category" :move="checkMove" class="dragArea" :options="{group:'items'}"> 
        <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){ 
       return true } 
      } 
     }); 

我希望每个在我的v型的的div有一个id。基于此;我想我需要在li标签中使用类似v-bind：key =“category.id”的东西（使用v-for的那个），这使得我的div id [Object object] [Object object] [Object对象]

我认为这是针对我的类别中的每个项目我想为每个类别添加一个div id以及每个项目的div id这些应该类似于“类别我的数据对象看起来像这样：

{“data”：{“uncategorized”：[{“id”）;“name”（类别的名称，所以未分类和“item.name” ：0，“name”：“”}，{“id”：1，“name”：“first”}，{“id”：2，“name”：“another”}]}}

Answer 1

如果数据值为{uncategorized: [....]}，您需要object v-for，它可以为您提供第一个相关变量中的值部分（此处为阵列）和第二个相关变量中的键（'未分类'）。如果我理解正确，那就是你想要的类别名称。所以也许：

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

这将绑定类别名称作为可拖动的id，项目名称作为内部div的id。 Binding to key是Vue用来更新魔法的提示。

我不知道你想在v-model中使用什么，但是因为你没有问过这个问题，所以我假设你知道该怎么做。

Answer 2

我解决了这个问题，使用v：bind-id或者简称id。这里是我的完整代码：

<ul> 
    <li class='category-item' v-for="(object,category) in data"> 
     <a href=""><h1>${ object.name }</h1></a> 
     <a style id='add-item-btn' v-bind:href="'/create/'+object.category_id"><img width='10' src="{{ url_for('static',filename='images/add-item.png') }}"/></a> 
     <draggable :id="'category-' + object.category_id" v-model="object.items" :move="checkMove" class="dragArea" :options="{group:'items'}"> 
       <div class="list-item" v-for="(item,key) in object.items" :id="item.id"> 
        <a v-bind:href="'/edit/'+item.id"> ${ item.name }</a> 
       </div> 
     </draggable> 
    </li> 
</ul>