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

Question

我有这个搜索输入：

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

而这个“输出”区域：

<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"
/>

i 从 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())
        );
      }
    },
  },
};

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

Answer 1

搜索所有列：

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

看到它有效：

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))
      );
  }
}

看到它有效：

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对于每个条目，都包含在该字段中保存的值中。

第二个不太通用，因此更准确。当您确切知道要在哪些字段中搜索时，您可能想使用它来防止误报。

另一种选择是为用户提供一个下拉列表，指向 select 他们要过滤的列。

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>

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

Filter search with computed in vue.js 3

javascript

search

filter

vue.js

vuejs3