CODEWITHSUNDEEP
vue.js
BigBoy1337
BigBoy1337

Reputation: 4963

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

Here is my 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 }
            }
        });

I want each of the div in my v-for to have an id. Based on this; https://v2.vuejs.org/v2/guide/list.html

I think I need something like v-bind:key="category.id" in the li tag (the one with the v-for. That makes my div id [Object object][Object object][Object object].

I think this is for each of the items in my category. I would like to add a div id to each category as well as a div id to each item in category. These should be something like "category.name" (the name of the category, so uncategorized, and "item.name" in the item itself. My data object looks like this:

{"data": {"uncategorized": [{"id": 0, "name": ""}, {"id": 1, "name": "first"}, {"id": 2, "name": "another"}]}}

Upvotes: 0

Views: 8116

Answers (2)

Roy J
Roy J

Reputation: 43881

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.

Upvotes: 1

BigBoy1337
BigBoy1337

Reputation: 4963

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>

Upvotes: 3

Related Questions