时间戳

首页 > 解决方案 > 更改路由的查询定义属性时组合框不为空

vue.js - 更改路由的查询定义属性时组合框不为空

问题描述

我有一个组合框，它基本上是一个带去抖动的搜索。

这是我的组合框：

<v-combobox
  :placeholder="$t('search_placeholder')"
  hide-no-data
  hide-details
  rounded
  outlined
  dense
  class="hidden-sm-and-down mr-2"
  append-icon=""
  :search-input.sync="search"
  >
     <v-icon slot="append" color="#5CBAD4">
       {{ icons.mdiMagnify }}
     </v-icon></v-combobox>

这是搜索属性的定义：

search: this.$route.query.search || null

这是其余使用的功能：

watch: {
    search (val) {
      if (!val) {
        return
      }

      this.fetchEntriesDebounced(val)
    }
  },
  methods: {
    fetchEntriesDebounced (val) {
    // cancel pending call
      clearTimeout(this._timerId)

      // delay new call 500ms
      this._timerId = setTimeout(() => {
        // if (!this.$route.fullPath.includes('produits') && !this.$route.fullPath.includes('products')) { this.$emit('loadingProducts') }
        this.$emit('loadingProducts')
        const query = { ...this.$route.query, search: val, page: 1 }
        // console.log('Query: ', query)
        this.$router.replace({ name: 'products___' + this.$i18n.locale, query })
      }, 500)
    },
    updateQuery (value, key) {
      const query = { ...this.$route.query, [key]: value, page: 1 }
      // console.log('Query: ', query)
      this.$router.replace({ name: 'products___' + this.$i18n.locale, query })
    }
  }

当我使用空搜索路由查询参数调用 updateQuery() 时，组合框中的前一个搜索词不会删除。

请问我在这里缺少什么？我正在使用 Vuejs3。

谢谢你的帮助。

标签： vue.jscomboboxvuetify.jsvuejs3

解决方案

推荐阅读