查找两个数组中的匹配项

时间:2018-10-15 13:36:14

标签: arrays vue.js vuetify.js

更新 得到答案:

if (this.checkedColors.length > 0) {
  straps = straps.filter(strap => {
    return strap.colors.find(color => {
      return this.checkedColors.includes(color.title.toLowerCase());
    });
  });
}

我有两个数组,需要返回与复选框值匹配的产品。

我创建了一个屏幕录像以显示其工作原理:http://recordit.co/EddLjeqM7i

我的代码如下:

export default {
  data() {
    checkedColors: [],
    filterings: [{
        title: "Farver",
        filters: [{
            title: "Grøn",
            value: "grøn"
          },
          {
            title: "Rød",
            value: "rød"
          },
          {
            title: "Gul",
            value: "yellow"
          },
          {
            title: "Lilla",
            value: "lilla"
          },
          {
            title: "Blå",
            value: "blå"
          },
          {
            title: "Grå",
            value: "grå"
          },
          {
            title: "Sort",
            value: "sort"
          },
          {
            title: "Hvid",
            value: "hvid"
          },
          {
            title: "Brun",
            value: "brun"
          }
        ]
      }
    }
  },
    computed: {
filteredStraps() {
  var straps = this.straps;

  if (this.search !== null) {
    var straps = this.searchItems.filter(strap => {
      if (!this.search) return this.searchItems;
      return (
        strap.title.toLowerCase().includes(this.search.toLowerCase()) ||
        strap.skin.toLowerCase().includes(this.search.toLowerCase()) ||
        strap.type.toLowerCase().includes(this.search.toLowerCase())
      );
    });
  }

  if (this.checkedSkins.length > 0) {
    straps = straps.filter(strap => {
      return this.checkedSkins.includes(strap.skin.toLowerCase());
    });
  }
  if (this.checkedTypes.length > 0) {
    straps = straps.filter(strap => {
      return this.checkedTypes.includes(strap.type.toLowerCase());
    });
  }
  if (this.checkedColors.length > 0) {
    straps = straps.filter(strap => {
      return this.checkedColors.includes(strap.colors.toLowerCase());
    });
  }

  if (this.sort == "newest") {
    return straps.sort((a, b) => new Date(a.date) - new Date(b.date));
  }
  if (this.sort == "priceasc") {
    return straps.sort((a, b) => a.price > b.price);
  }
  if (this.sort == "pricedesc") {
    return straps.sort((a, b) => a.price < b.price);
  } else {
    return straps;
  }
}
  },
<v-expansion-panel class="elevation-0">
  <v-expansion-panel-content v-for="filtering in filterings.slice(0, 1)" :key="filtering.title">
    <div slot="header">{{filtering.title | capitalize}}</div>
    <v-card>
      <v-card-text>
        <v-list>
          <v-list-tile v-for="filter in filtering.filters" :key="filter.value">
            <v-list-tile-content>
              <v-checkbox :value="filter.value" :label="filter.title" v-model="checkedColors" color="primary"></v-checkbox>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-card-text>
    </v-card>
  </v-expansion-panel-content>
</v-expansion-panel>

straps数组如下:https://i.imgur.com/HIEBgqW.png

我需要计算函数以匹配其他过滤和排序方法,以正确返回表带。

我还有另外两种有效的方法,但是它们不需要遍历数组即可找到与我要查找的值匹配的值。

0 个答案:

没有答案