如何为v-for列表中的每个元素添加div id?

时间:2017-08-04 00:27:26

标签: vue.js

这是我的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-for中的每个div都有一个id。基于此; https://vuejs.org/v2/guide/list.html

我想我需要类似v-bind:key =“category.id”中的li标签(带有v-for的那个。这使我的div id [Object object] [Object object] [Object object] 。

我认为这适用于我的类别中的每个项目。我想为每个类别添加一个div id,并为类别中的每个项目添加一个div id。这些应该类似于“category.name”(类别的名称,因此未分类,以及项目本身中的“item.name”。我的数据对象如下所示:

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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>

这会将类别名称绑定为draggable的id,将项目名称绑定为内部div的id。 Binding to key是Vue用于更新魔法的提示。

我不知道你想在v-model中使用什么,但由于你没有问过它,我认为你知道该怎么做。