问题描述
我是Vue.js的初学者。我想在列表中添加新项目，但是这些 项目需要根据其“ category”属性 显示在单独的div中。另外， 每个项目都有可以编辑（尚未制作）或删除的选项 。我已经读到，不建议在v-if内使用v-for，因此受second answer here的启发，我使用了 Computing Properties 。我需要为每个列表项添加索引，因为我找不到在没有索引的情况下删除Vue.js中列表项的任何方法。问题在于，我们从计算的属性中迭代了两个列表，并且基本上我们有重复的索引（请在我的代码中签出列表项的打印内容，您将会理解），因此它从错误的类别中删除项。 此问题也将使编辑项目名称变得更加困难。
我正在考虑解决此问题的方法，但是我将不得不同时使用v-for和v-if，不推荐。
另外，这对我来说不是一个很好的解决方案，因为 我可能需要根据给定的类别列表（可能有很多）动态生成这些divs ，而且我不知道如何为每个类别动态生成计算属性。为此，我需要在v-if内使用v-for，不建议这样做。
所以基本上我有两个问题：
1。从错误的类别中删除项目
2。如果我继续使用具有计算属性的此方法，则会为每个类别动态生成div。
这是我的代码：fiddle
您有什么建议或解决方案吗？
谢谢！
解决方法
index中的v-for与amenities数组中的对象无关。
由于您不想同时为这两个类别创建一个循环，因此我可以采用以下解决方案：
更好的方法是在添加对象时为每个对象自动生成唯一的id，然后根据该对象删除：
new Vue({
el: '#app',data: function() {
return {
Amenity: {
name: '',category: ''
},amenities: [],nextId:0
}
},computed: {
familyCategory: function () {
return this.amenities.filter(i => i.category === 'family')
},facilitiesCategory: function () {
return this.amenities.filter(i => i.category === 'facilities')
}
},methods: {
addAmenity: function(e) {
this.amenities.push({
id: this.nextId,name: this.Amenity.name,category: this.Amenity.category
});
this.Amenity = {
name: '',category: 'family'
};
this.nextId = this.nextId+1;
},removeElement : function (id) {
console.log(id);
this.amenities=this.amenities.filter(e => e.id!=id);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<br /> Amenity name:
<input type="text" v-model="Amenity.name" placeholder="Amenity name">
<label for="category">Category:</label>
<select id="cetegory" v-model="Amenity.category">
<option value="family">Family</option>
<option value="facilities" >Facilities</option>
</select>
<input type="button" @click="addAmenity" value="Submit" class="btn btn-info">
<div>
<h3>Family</h3>
<ol>
<li v-for="(item,index) in familyCategory">
{{ index }} - {{ item.name }}
<button>
Edit
</button>
<button v-on:click="removeElement(item.id)">
Delete
</button>
</li>
</ol>
</div>
<div>
<h3>Facilities</h3>
<ol>
<li v-for="(item,index) in facilitiesCategory">
{{ index }} - {{ item.name }}
<button>
Edit
</button>
<button v-on:click="removeElement(item.id)">
Delete
</button>
</li>
</ol>
</div>
</div>