使用在vue.js 3中计算的过滤搜索

2022-04-07 00:00:00 filter search javascript vue.js vuejs3

我有以下搜索输入：

<input
class="form-control"
type="text"
name="search"
placeholder="search..."
v-model="search"
/>

和这个&Quot；输出&区域：

<my-comp
v-for="item in filter"
:key="item.id"
:id="item.id"
:imgsrc="item.imgsrc"
:price="item.price"
:city="item.city"
:country="item.country"
:reviewnum="item.reviewnum"
:daynum="item.daynum"
/>

我从json文件导入数据这是数据

[
    {"id": 1, "city":"California", "country": "United State of America", "price": "700", "reviewnum": "890", "daynum": "5", "imgsrc": "img/place/1.png"},
    {"id": 2, "city":"london", "country": "United Kingdom", "price": "550", "reviewnum": "900", "daynum": "4", "imgsrc": "img/place/2.png"},
    {"id": 3, "city":"Korola Megna", "country": "Nepal", "price": "350", "reviewnum": "150", "daynum": "5", "imgsrc": "img/place/3.png"},
    {"id": 4, "city":"Miami Beach", "country": "United State of America", "price": "850", "reviewnum": "660", "daynum": "7", "imgsrc": "img/place/4.png"},
    {"id": 5, "city":"California", "country": "United State of America", "price": "600", "reviewnum": "380", "daynum": "6", "imgsrc": "img/place/5.png"},
    {"id": 6, "city":"Saintmartine Iceland", "country": "Kingdom of the Netherlands", "price": "450", "reviewnum": "340", "daynum": "3", "imgsrc": "img/place/6.png"}
]

其想法是用户搜索城市或国家或任何数据，输出应仅显示他正在搜索的卡。

这是VUE js代码：

import data from "@/assets/data.json";

export default {
  name: "Home",
  data: function () {
    return {
      allData: data,
      search: "",
    };
  },
  components: { myComp, foooter, headeer },
  computed: {
    filter() {
      if (!this.search) {
        return this.allData;
      } else {
        return this.allData.filter(({ country }) =>
          (country).toLowerCase().includes(this.search.toLowerCase())
        );
      }
    },
  },
};

但我的函数只接受一个变量。我该怎么办？

解决方案

搜索所有列：

computed: {
  filteredData() {
    return this.allData
      .filter(
        (entry) => this.allData.length
          ? Object.keys(this.allData[0])
              .some(key => ('' + entry[key]).toLowerCase().includes(this.search))
          : true
      );
  }
}

看到它起作用了：

数据-lang="js"数据-隐藏="真"数据-控制台="假"数据-巴贝尔="假">

new Vue({
  el: '#app',
  data: () => ({
    search: '',
    allData: [
    {"id": 1, "city":"California", "country": "United State of America", "price": "700", "reviewnum": "890", "daynum": "5", "imgsrc": "img/place/1.png"},
    {"id": 2, "city":"london", "country": "United Kingdom", "price": "550", "reviewnum": "900", "daynum": "4", "imgsrc": "img/place/2.png"},
    {"id": 3, "city":"Korola Megna", "country": "Nepal", "price": "350", "reviewnum": "150", "daynum": "5", "imgsrc": "img/place/3.png"},
    {"id": 4, "city":"Miami Beach", "country": "United State of America", "price": "850", "reviewnum": "660", "daynum": "7", "imgsrc": "img/place/4.png"},
    {"id": 5, "city":"California", "country": "United State of America", "price": "600", "reviewnum": "380", "daynum": "6", "imgsrc": "img/place/5.png"},
    {"id": 6, "city":"Saintmartine Iceland", "country": "Kingdom of the Netherlands", "price": "450", "reviewnum": "340", "daynum": "3", "imgsrc": "img/place/6.png"}
]
  }),
  computed: {
    filteredData() {
      return this.allData
        .filter(
          (entry) => this.allData.length
            ? Object.keys(this.allData[0])
                .some(key => ('' + entry[key]).toLowerCase().includes(this.search))
            : true
        );
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<div id="app">
  <input type="search" v-model="search">
  <div v-for="entry in filteredData" :key="entry.id">
    <pre v-text="entry" />
  </div>
</div>

搜索特定列：

computed: {
  filteredData() {
    return this.allData
      .filter(
        ({ country, city }) => [country, city]
          .some(val => val.toLowerCase().includes(this.search))
      );
  }
}

看到它起作用了：

数据-lang="js"数据-隐藏="真"数据-控制台="假"数据-巴贝尔="假">

new Vue({
  el: '#app',
  data: () => ({
    search: '',
    allData: [
    {"id": 1, "city":"California", "country": "United State of America", "price": "700", "reviewnum": "890", "daynum": "5", "imgsrc": "img/place/1.png"},
    {"id": 2, "city":"london", "country": "United Kingdom", "price": "550", "reviewnum": "900", "daynum": "4", "imgsrc": "img/place/2.png"},
    {"id": 3, "city":"Korola Megna", "country": "Nepal", "price": "350", "reviewnum": "150", "daynum": "5", "imgsrc": "img/place/3.png"},
    {"id": 4, "city":"Miami Beach", "country": "United State of America", "price": "850", "reviewnum": "660", "daynum": "7", "imgsrc": "img/place/4.png"},
    {"id": 5, "city":"California", "country": "United State of America", "price": "600", "reviewnum": "380", "daynum": "6", "imgsrc": "img/place/5.png"},
    {"id": 6, "city":"Saintmartine Iceland", "country": "Kingdom of the Netherlands", "price": "450", "reviewnum": "340", "daynum": "3", "imgsrc": "img/place/6.png"}
]
  }),
  computed: {
    filteredData() {
      return this.allData
        .filter(
          ({ country, city }) => [country, city]
            .some(val => val.toLowerCase().includes(this.search))
        );
      }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<div id="app">
  <input type="search" v-model="search">
  <div v-for="entry in filteredData" :key="entry.id">
    <pre v-text="entry" />
  </div>
</div>

第一个从第一个条目获取所有键(如果您有任何数据)，将所有值强制转换为字符串(以便它可以对其运行.toLowerCase())，并检查this.search是否包含在该字段中保存的值中，对于每个条目。

第二个不那么通用，因此更准确。您可能希望在确切知道要在哪些字段中搜索时使用它，以防止误报。

另一个选项是为用户提供下拉列表，以选择他们要作为筛选依据的列。

数据-lang="js"数据-隐藏="真"数据-控制台="假"数据-巴贝尔="假">

new Vue({
  el: '#app',
  data: () => ({
    searchTerm: '',
    searchColumn: 'id',
    allData: [
    {"id": 1, "city":"California", "country": "United State of America", "price": "700", "reviewnum": "890", "daynum": "5", "imgsrc": "img/place/1.png"},
    {"id": 2, "city":"london", "country": "United Kingdom", "price": "550", "reviewnum": "900", "daynum": "4", "imgsrc": "img/place/2.png"},
    {"id": 3, "city":"Korola Megna", "country": "Nepal", "price": "350", "reviewnum": "150", "daynum": "5", "imgsrc": "img/place/3.png"},
    {"id": 4, "city":"Miami Beach", "country": "United State of America", "price": "850", "reviewnum": "660", "daynum": "7", "imgsrc": "img/place/4.png"},
    {"id": 5, "city":"California", "country": "United State of America", "price": "600", "reviewnum": "380", "daynum": "6", "imgsrc": "img/place/5.png"},
    {"id": 6, "city":"Saintmartine Iceland", "country": "Kingdom of the Netherlands", "price": "450", "reviewnum": "340", "daynum": "3", "imgsrc": "img/place/6.png"}
]
  }),
  computed: {
    columns() {
      return Object.keys(this.allData[0]);
    },
    filteredData() {
      return this.allData
        .filter(
          entry => ('' + entry[this.searchColumn]).toLowerCase().includes(this.searchTerm)
        );
      }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<div id="app">
  Search <input type="search" v-model="searchTerm">
  in: <select v-model="searchColumn">
    <option v-for="column in columns" :value="column" :key="column" v-text="column" />
  </select>
  <div v-for="entry in filteredData" :key="entry.id">
    <pre v-text="entry" />
  </div>
</div>

相关文章