在不使用 v-if 和 v-for 的情况下 Vue.js 中显示（添加、编辑）和删除多列列表项

Question

我是 Vue.js 的初学者。我想在列表中添加新项目，但是这些 项目需要根据它们的“类别”显示在单独的 div 中属性 .此外，每个项目都可以选择编辑（尚未编辑）或删除。我读到不建议在 v-for 中使用 v-if，因此受到的启发，我使用 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>

在不使用 v-if 和 v-for 的情况下 Vue.js 中显示（添加、编辑）和删除多列列表项

Displaying(adding, editing) and Deleting list items in multiple columns in Vue.js without v-if and v-for

list

vue.js

vuejs2

v-for