[Vuejs]-How to add a div id to each element in a v-for list?

by

3👍

✅

I solved this using v:bind-id or :id for short. Here is my full code: 

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

1👍

If a data value is {uncategorized: [....]}, you want object v-for, which can give you the value part (the array, here) in the first associated variable and the key (‘uncategorized’) in the second associated variable. That’s the category name you want, if I understand correctly. So maybe:

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

That would bind the category name as the id of the draggable, and the item name as the id of the inner div. Binding to key is a hint Vue uses in doing its update magic.

I don’t know what you want to use in the v-model, but since you didn’t ask about it, I assume you know what to do.

👤Roy J

Leave a comment