这是我的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”}]}}
答案 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
中使用什么,但由于你没有问过它,我认为你知道该怎么做。