v-forリストの各要素にdiv idを追加するにはどうすればよいですか？ここで

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を持っていると思います。これに基づいて; https://vuejs.org/v2/guide/list.html

私はv-bindのようなものが必要だと思う：liタグのkey = "category.id"（v-forを持つもの）：div id [Object object] [Object object] [Objectオブジェクト]。

これは私のカテゴリの各アイテムのためだと思います。div idをカテゴリの各アイテムのdiv idとdiv idを追加したいと思います。 "データ"：{"未分類"： "未分類"のようなカテゴリの名前なので、カテゴリ化されていないので、項目自体の "item.name" ：0、 "name"： ""}、{"id"：1、 "name"： "first"}、{"id"：2、 "name"： "another"}]}}}

Answer 1

データ値が{uncategorized: [....]}の場合は、object v-forが必要です。これは、最初の関連変数の値部分（ここでは配列）と2番目の関連変数のキー（「未分類」）を与えることができます。私が正しく理解すれば、それはあなたが望むカテゴリー名です。したがって、おそらく：

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