从阵列由ID Vuejs过滤删除对象 [英] Remove object from array filtered by an Id Vuejs

查看：186
本文介绍了从阵列由ID Vuejs过滤删除对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我做一个功能的基础上的复选框的选中要删除一个以上的纪录，但我收到的ID（而不是完整的对象），我面临的问题，从数组中删除它。

有人能帮帮我吗？

JSBin

JS：

 新的Vue（{  EL：身体，  数据：{
    记录：{}，
    选择：[]
    列表：
        {名称：'谷歌'，ID：1，猫：1类}，
        {名：Facebook的，ID：2，猫：第2类}，
      ]
  }，  方法： {
    deleteSelected：功能（）{
      对（在this.selected变种R）{
        this.list = this.list.filter（功能（VAL，I）{
          返回val.id == this.selected [R]！;
        }）;
      }
    }
  }}）;

HTML 

 ＆LT;身体GT;  ＆LT; D​​IV CLASS =容器＆GT;    ＆LT; D​​IV CLASS =行P-10＆GT;
      ＆LT; D​​IV CLASS =COL-MD-6 m_md_bottom_15＆GT;
        ＆LT;跨度类=BTN BTN-危险数据切换=提示数据原标题=删除@点击=deleteSelected（）＆GT;删除所选＆LT; I＆GT /;＆LT; / SPAN＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT;小时＆GT;
   ＆LT;表类=table表条纹表镶上＆GT;
     ＆LT;＆THEAD GT;
       ＆所述; TR＆GT;
         百分位＆GT;＆LT; /第i
         ＆LT;第i ID和LT; /第i
         ＆LT;第i个姓名和LT; /第i
         ＆LT;第i操作和LT; /第i
       ＆LT; / TR＆GT;
     ＆LT; / THEAD＆GT;
     ＆LT;＆TBODY GT;
       ＆LT; TR V-FOR =R列表中＆GT;
         ＆LT; TD＆GT;＆LT;输入类型=复选框V模型=选择值={{r.id}}＆GT;＆LT; / TD＆GT;
         ＆LT; TD类=TEXT-中心的风格=宽度：90像素＆GT; {{r.id}}＆LT; / TD＆GT;
         ＆所述; TD＆GT; {{r.name}}＆LT; / TD＆GT;
         ＆LT; TD类=TEXT-中心的风格=宽度：90像素＆GT;
           ＆LT;跨度类=BTN BTN-警告BTN-XS@点击=编辑（R）＆GT;＆LT; I类=FA-FW发FA-铅笔＆GT;＆LT; / I＆GT;＆LT; / SPAN＆GT ;
         ＆LT; / TD＆GT;
       ＆LT; / TR＆GT;
     ＆LT; / TBODY＆GT;
  ＆LT; /表＆gt;
  ＆LT; / DIV＆GT;  ＆LT; D​​IV CLASS =容器＆GT;
    ＆LT; pre＆GT; {{$数据| JSON}}＆LT; / pre＆GT;
  ＆LT; / DIV＆GT;
  ＆所述; SCRIPT SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js＆GT;＆下; /脚本＆GT;
＆LT; /身体GT;


解决方案

有两个主要问题与code，它已经被JS斌强调其中的一个：


  1. 如果它们引用起圈值，则不应在循环中所定义的功能。 这里看看为什么。（除非你把它包在IIFE或使用让来定义循环变量）。


  2. 您与该类型的所选条目比较键入编号的ID 字符串与在！== 运营商。 <一href=\"http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons\">This不会工作，因为！== 做了严格相等。（你可以看到，在你的容器输出）。


要解决的第一个问题，我将完全放弃外为循环和使用的 的indexOf 来检查当前 VAL。 ID 在 this.selected 存在。

  this.selected.indexOf（val.id）=== -1;

这不会工作，但因为我们仍然比较一个字符串与编号在的indexOf 。因此，我们必须将 val.id 成一个字符串（解决问题＃2）。

  this.selected.indexOf（val.id.toString（））=== -1;

这给我们留下了以下code（删除为循环后）：

 新的Vue（{  EL：身体，  数据：{
    记录：{}，
    选择：[]
    列表：
        {名称：'谷歌'，ID：1，猫：1类}，
        {名：Facebook的，ID：2，猫：第2类}，
      ]
  }，  方法： {
    deleteSelected：功能（）{
        this.list = this.list.filter（功能（VAL，I）{
            返回this.selected.indexOf（val.id.toString（））=== -1;
        }， 这个）;
     }
  }}）;

注意：为了使用这个的VUE组件的上下文中的过滤器内功能，我们传递它作为第二参数。

JS斌

I am doing a function to delete more then one record based on the checkboxes selected but as I receive the ID (not the full object) I am facing problems to remove it from the array.

Somebody can help me?

JSBin

JS:

new Vue({

  el: 'body',

  data: {
    record: {},
    selected: [],
    list: [
        { name: 'Google', id: 1, cat: 'Category 1' },
        { name: 'Facebook', id: 2, cat: 'Category 2' },
      ],
  },

  methods: {
    deleteSelected: function () {
      for (var r in this.selected) {
        this.list = this.list.filter(function(val, i) {
          return val.id !== this.selected[r];
        });
      }
    }
  }

});

HTML:

<body>

  <div class="container">

    <div class="row p-10">
      <div class="col-md-6 m_md_bottom_15">
        <span class="btn btn-danger" data-toggle="tooltip" data-original-title="Delete" @click="deleteSelected()">Remove selected</i></span>
      </div>
    </div>
  <hr>
   <table class="table table-striped table-bordered">
     <thead>
       <tr>
         <th></th>
         <th>Id</th>
         <th>Name</th>
         <th>Actions</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="r in list">
         <td><input type="checkbox" v-model="selected" value="{{ r.id }}"></td>
         <td class="text-center" style="width:90px"> {{ r.id }} </td>
         <td> {{ r.name }} </td>
         <td class="text-center" style="width:90px">
           <span class="btn btn-warning btn-xs" @click="edit(r)"><i class="fa-fw fa fa-pencil"></i></span>
         </td>
       </tr>
     </tbody>
  </table>
  </div>

  <div class="container">
    <pre>{{ $data | json }}</pre>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
</body>

解决方案

There are two main problems with your code, one of them which is already highlighted by JS Bin:

  1. You shouldn't define functions within a loop if they reference the looped value. See here why. (Unless you wrap it in an IIFE or use let to define your loop variable).

  2. You are comparing an id of the type Number with a selected entry of the type String with the !== operator. This wont work, because !== does a strict equal. (You can see that in your container output).

To fix the first issue, I would forgo the outer for loop entirely and use indexOf to check if the current val.id exists in this.selected.

this.selected.indexOf(val.id) === -1;

This wont work yet, because we are still comparing a String with a Number in indexOf. So we have to transform the val.id into a string (which fixes problem #2).

this.selected.indexOf(val.id.toString()) === -1;

Which leaves us with the following code (after removing the for loop):

new Vue({

  el: 'body',

  data: {
    record: {},
    selected: [],
    list: [
        { name: 'Google', id: 1, cat: 'Category 1' },
        { name: 'Facebook', id: 2, cat: 'Category 2' },
      ],
  },

  methods: {
    deleteSelected: function () {
        this.list = this.list.filter(function(val, i) {
            return this.selected.indexOf(val.id.toString()) === -1;
        }, this);
     }
  }

});

Note: In order to use the this context of the vue component inside the filter function, we pass it in as the second argument.

JS Bin

这篇关于从阵列由ID Vuejs过滤删除对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆