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

我想我需要在 li 标签中(带有 v-for 的那个(中像 v-bind：key="category.id" 这样的东西。这使我的div id [

对象对象][对象对象][对象对象]。我认为这是针对我类别中的每个项目。我想为每个类别添加一个div id，并为类别中的每个项目添加一个div id。这些应该是类似于"category.name"(类别的名称，因此未分类(和项目本身中的"item.name"。我的数据对象如下所示：

{"data"： {"unclassd"： [{"id"： 0， "name"： "}， {"id"： 1， "name"： "first"}，{"id"： 2， "name"： "other"}]}}

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: [....]}，则需要对象 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>

这会将类别名称绑定为可拖动对象的 id，将项目名称绑定为内部div 的 id。 绑定到key是 Vue 在执行更新魔法时使用的提示。

我不知道你想在v-model中使用什么，但既然你没有问，我想你知道该怎么做。