Vue搜索过滤默认显示所有项目

Question

我的vue应用出现问题，希望可以在其中搜索我的商品。问题在于，默认情况下，仅当发生搜索时它们才显示。

<script>
import db from "../firebase/firebaseInit";

export default {
  metaInfo: {
    title: "Udvalget af urremme",
    meta: [
      {
        name: "description",
        content:
          "Lukrative urremme i læder, reptiler og mange andre eksotiske typer med pasning til Rolex, Omega, IWC og mange andre mærker."
      }
    ]
  },
  data() {
    return {
      title: "Udvalget af urremme",
      loading: false,
      searchItems: [],
      search: null,
      select: null,
      straps: [],
      modal: false,
      sort: "",
      sorters: [
        { title: "Nyeste", value: "newest" },
        { title: "Pris stigende", value: "priceasc" },
        { title: "Pris faldende", value: "pricedesc" }
      ]
    };
  },
  filters: {
    capitalize: function(value) {
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  },
  watch: {
    search(val) {
      val && val !== this.select && this.querySelections(val);
    }
  },
  created() {
    this.getStraps();
  },
  computed: {
    filteredStraps() {
      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())
        );
      });

      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;
      }
    }
  },
  methods: {
    querySelections(v) {
      this.loading = true;

      setTimeout(() => {
        this.searchItems = this.straps.filter(e => {
          return (
            (e.title || "").toLowerCase().indexOf((v || "").toLowerCase()) > -1
          );
        });
        this.loading = false;
      }, 500);
    },
    getStraps() {
      db.collection("straps")
        .get()
        .then(querySnapshot => {
          const straps = [];
          querySnapshot.forEach(doc => {
            const data = {
              id: doc.id,
              title:
                doc
                  .data()
                  .title.charAt(0)
                  .toUpperCase() + doc.data().title.slice(1),
              price: doc.data().price,
              skin: doc.data().skin,
              type: doc.data().type,
              imgs: doc.data().imgs[0].url,
              colors: doc.data().colors,
              date: doc
                .data()
                .date.toString()
                .slice(0, 15)
            };
            straps.push(data);
          });
          this.straps = straps;
        });
    }
  }
};
</script>

        <v-layout>
          <v-flex px-3 sm8>
            <v-autocomplete :loading="loading" :items="searchItems" :search-input.sync="search" v-model="select" flat hide-no-data label="Søg i urremme" prepend-inner-icon="search" clearable>
              <template slot="item" slot-scope="data">
                <v-list-tile>
                  <v-list-tile-avatar class="pr-3">
                    <img :src="data.item.imgs" alt="">
                  </v-list-tile-avatar>
                  <v-list-tile-content>
                    <v-list-tile-title>
                      {{data.item.title}}
                    </v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </template>
            </v-autocomplete>
          </v-flex>
          <v-flex offset-lg2 xs3 sm4 lg2 px-3>
            <v-select v-model="sort" :items="sorters" item-text="title" label="Sorter efter" :item-value="sorters.value"></v-select>
          </v-flex>
        </v-layout>

        <v-layout justify-start wrap>
          <v-flex xs6 pa-3 sm4 lg2 v-for="strap in filteredStraps" :key="strap.id">
            <v-hover>
              <v-card :to="{name: 'Strap', params: {id: strap.id}}" flat slot-scope="{ hover }">
                <v-img :src="strap.imgs" aspect-ratio="1">
                  <v-layout class="grey lighten-1" slot="placeholder" fill-height align-center justify-center ma-0>
                    <v-progress-circular indeterminate color="grey darken-1"></v-progress-circular>
                  </v-layout>
                </v-img>
                <v-card-title primary-title>
                  <h3 class="text-xs-left">{{strap.title | capitalize}}</h3>
                </v-card-title>
                <v-card-text style="padding: 0 !important;">
                  <p class="text-xs-left">{{strap.price}} kr.</p>
                </v-card-text>
              </v-card>
            </v-hover>
          </v-flex>
        </v-layout>
        <v-layout v-if="filteredStraps.length === 0" justify-center>
          <v-flex>
            <h3>Vi har desværre ikke det, du søgte efter...</h3>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>

显示问题的演示链接： http://recordit.co/6LauqjrOD4

这个想法是让搜索和排序选项一起工作，但是如前所述，搜索功能默认不会显示项目。可以在上方的“ recordit”链接中看到这一点，在该链接中，我已演示了两种排序同时工作的情况。

Answer 1

使用计算选项修复此问题，以查看搜索模型是否为空，如果未应用任何内容，则返回默认的bands数组。

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

}，