Блог

 <script>
import ProductCartCard from "~/components/cart/ProductCartCard";

export default {
  name: "search-app",
  components: {
    ProductCartCard
  },
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      filteredItems: [],
      search: null,
      select: null
    };
  },
  watch: {
    search(val) {
      if (!val || val.length == 0) {
        this.filteredItems.splice(0, this.filteredItems.length);

        return;
      } else {
        val !== this.select amp;amp; this.querySelections(val);
      }
    }
  },
  methods: {
    querySelections(v) {
      this.loading = true;
      // Simulated ajax query
      setTimeout(() => {
        this.filteredItems.splice(
          0,
          this.filteredItems.length,
          ...this.items.filter(i => {
            return (i.externalName || "").toLowerCase().includes((v || "").toLowerCase());
          })
        );

        this.loading = false;
      }, 500);
    }
  }
};
</script> 

 <template>
  <div class="search-app-container">
    <v-autocomplete
      v-model="select"
      :loading="loading"
      :items="filteredItems"
      :search-input.sync="search"
      cache-items
      flat
      hide-no-data
      hide-details
      label="searchProduct"
      prepend-icon="mdi-database-search"
      solo-inverted
    >
      <template v-slot:item="data">
        <ProductCartCard :regularProduct="data" />
      </template>
    </v-autocomplete>
  </div>
</template>