【问题标题】:How to check if item already exists in array in vue.js?如何检查项目是否已存在于 vue.js 的数组中?
【发布时间】:2017-01-04 00:00:15
【问题描述】:

我有这个数组,我在单击时添加值,但我想检查值是否已经在数组中,如果它什么都不做。我尝试使用 indexOf,但每次都得到相同的结果

this.fields.push(this.field);
      this.field = { value: '' };

【问题讨论】:

    标签: javascript vuejs2 vue.js


    【解决方案1】:

    在对象数组中最好使用Array.some()

    this.users = [{id : 1, name : 'Jonh Doe'},{id : 2, name : 'Mary Jean'}]
    
    if(!this.users.some(data => data.id === 1)){
        //don't exists       
    }else{
        //exists because Jonh Doe has id 1
    }
    

    来源:https://www.samanthaming.com/

    【讨论】:

    • 帮了我很多,但我看到你有一些小错误“!”在 if 语句中,因此在此它说“如果不”,因此如果在您的情况下“id”存在,它将落入 else 而不是 if。但是我已经使用了您的解决方案,谢谢:)
    • 你是对的,我已经更正了,这是因为在我的示例中,我想在数组中找不到它时执行一个动作☺
    【解决方案2】:

    您是否通过value 属性确定它是否在数组中?如果是这样,您可以使用Array.some()

    var exists = this.fields.some(function(field) {
      return field.value === this.field.value
    });
    
    if (!exists) {
      this.fields.push(this.field);
    }
    

    【讨论】:

      【解决方案3】:

      这可能是一个详细而简单的解决方案。

      在 JavaScript 或 Jquery 中

      //plain array
      var arr = ['a', 'b', 'c'];
      var check = arr.includes('a');
      console.log(check); //returns true
      if (check)
      {
         // value exists in array
         //write some codes
      }
      
      // array with objects
      var arr = [
            {x:'a', y:'b'},
            {x:'p', y:'q'}
        ];
      
      // if you want to check if x:'p' exists in arr
      var check = arr.filter(function (elm){
          if (elm.x == 'p')
          {
             return elm; // returns length = 1 (object exists in array)
          }
      });
      
      // or y:'q' exists in arr
      var check = arr.filter(function (elm){
          if (elm.y == 'q')
          {
             return elm; // returns length = 1 (object exists in array)
          }
      });
      
      // if you want to check, if the entire object {x:'p', y:'q'} exists in arr
      var check = arr.filter(function (elm){
          if (elm.x == 'p' && elm.y == 'q')
          {
             return elm; // returns length = 1 (object exists in array)
          }
      });
      
      // in all cases
      console.log(check.length); // returns 1
      
      if (check.length > 0)
      {
         // returns true
         // object exists in array
         //write some codes
      }
      

      在 Vue 中

      <script>
          export default {
              data: function () {
                  return {
                     arr = [
                         {x:'a', y:'b'},
                         {x:'p', y:'q'}
                      ],
                   }
               },
              methods: {
      
                  // assign this function to any event of any dom
                  checkObjInArr = function(){
      
                           var check = this.arr.filter(function (elm) {
                               if (elm.x == 'a' && elm.y == 'M') {
                                       return elm;
                                  }
                            });
                           console.log(check.length > 0); // returns 1
                           if (check.length > 0)
                              {
                                  // returns true
                                  // object exists in array
                                  //write some codes
                               }
                      },                
              },
           }
      </script>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2021-08-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-06-09
        • 2021-10-26
        相关资源
        最近更新 更多