Question

customFilter (item, queryText) {
      const textOne = item.designation.toLowerCase()
      const textTwo = item.reference.toLowerCase()
      const searchText = queryText.toLowerCase()
      return textOne.indexOf(searchText) > -1 ||
        textTwo.indexOf(searchText) > -1 
}

<v-autocomplete
      dense=""
      v-model="selectedProduct"
      prepend-inner-icon="mdi-magnify"
      rounded=""
      :items="products_references_desginations"
      :filter="customFilter"
      item-text="designation"
      filled
      label="Recherche"
      single-line=""
      return-object=""
      clearable=""
    >

这在大多数情况下都有效，但是碰巧我遇到了这个错误：

我猜想这是我的自定义过滤器中的item变量有时会为null的原因，但我不知道为什么会这样。发生这种情况时，我必须重新加载服务器，然后它才能正常工作，一段时间后，会发生相同的错误。

完整组件：

import {mapGetters, mapMutations} from 'vuex'
export default {
  data: () => ({
    selectedProduct: null, 
  }),
  watch: {
    selectedProduct(prod) {
      console.log(prod)
      if(prod != null) {
        this.$emit('selectedProductFromSearchBar', prod)
      }
    }
  },
  methods: {
    ...mapMutations([]),
    toProductDetailsPage(product){
      console.log(product)
    },
    customFilter (item, queryText) {
      const textOne = item.designation.toLowerCase()
      const textTwo = item.reference.toLowerCase()
      const searchText = queryText.toLowerCase()
      return textOne.indexOf(searchText) > -1 ||
        textTwo.indexOf(searchText) > -1 
    },
  },
  computed: {
    ...mapGetters(['products_references_desginations']),
  },

  mounted () {
  },
}

<template>
  <div class="">
    <v-autocomplete
      dense=""
      v-model="selectedProduct"
      prepend-inner-icon="mdi-magnify"
      class="pa-0 search-bar"
      rounded=""
      :items="products_references_desginations"
      :filter="customFilter"
      item-text="designation"
      filled
      color="blue-grey lighten-2"
      label="Recherche"
      single-line=""
      return-object=""
      clearable=""
    >
      <template v-slot:item="data"> 
        <template>
          <v-list-item-content style=" overflow: hidden">
            <v-list-item-title v-html="data.item.designation"></v-list-item-title>
            <v-list-item-subtitle v-html="data.item.reference"></v-list-item-subtitle>
          </v-list-item-content>
        </template>
      </template>
    </v-autocomplete>
  </div> 
</template>

我的数据结构：

Answer 1

问题出在我的数据中，创建了一个空产品，我还不知道。但是问题不是我想的那样来自v-autocomplete。

Vuetify v-自动完成自定义过滤错误

1 个答案: