如何將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>