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-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”}]}}

Answer 1

我使用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>

Answer 2

如果数据值为{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中使用什么，但由于你没有问过它，我认为你知道该怎么做。

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

2 个答案: