在没有 v-if 和 v-for 的 Vue.js 中显示（添加、编辑）和删除多个列中的列表项

Question

我是 Vue.js 的初学者。我想在列表中添加新项目，但是这些项目需要根据它们的“类别”属性显示在单独的 div 中。此外，每个项目都可以选择编辑（尚未编辑）或删除。我读过不建议在v-for 中使用v-if，因此受到second answer here 的启发，我使用Computed Properties 来做到这一点。我需要为每个列表项添加索引，因为我还没有找到任何方法在没有索引的情况下删除 Vue.js 中的列表项。问题是我们从计算的属性中迭代两个列表，基本上我们有重复的索引（查看我的代码中列表项的打印，你会明白）所以它从错误的类别中删除项目。 这个问题也会使编辑项目名称变得更加困难。
我正在考虑解决这个问题的方法，但是 我必须同时使用 v-for 和 v-if ，这不是推荐。
另外，这对我来说不是很好的解决方案，因为我可能需要从给定的类别列表中动态生成这些 div（可能有很多），而且我不知道如何为每个类别动态生成计算属性。为此，我需要在v-for 内使用v-if，不建议这样做。

所以基本上我有两个问题：
1.从错误的类别中删除项目
2。如果我继续将此方法与计算属性一起使用，则会为每个类别动态生成 div。

这是我的代码：fiddle
您有什么建议或解决方案吗？
提前致谢！

Answer 1

v-for 中的index 与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>