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

Posted 2023-02-16

【中文标题】在没有 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

【发布时间】：2020-12-16 17:45:24

【问题描述】：

我是 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 您有什么建议或解决方案吗？ 提前致谢！

【参考方案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>
 

【讨论】：

非常感谢 Majed 的回答！这绝对解决了删除问题。如果你有动态生成 div 的想法，不需要为每个类别制作计算属性，请随意编写。

不客气。请将答案标记为解决方案。为什么不为每个类别制作单独的数组？这样，您将拥有两个 v-for（每个一个），并且索引将是数组中对象的位置。

我将答案标记为解决方案。我会尝试这样做，但通常我想自动化它并尽可能多地制作动态代码。谢谢马吉德！