javascript - Vue 路由参数在 @change 事件发生变化但组件不受影响

Question

我正在使用 v-autocomplete 创建搜索过滤器。 @change 事件在 URL 上运行良好。但组件没有改变。因此组件的结果不会根据 URL 发生变化。

  // Component    
  <v-autocomplete
    v-model="select"
    :loading="loading"
    :items="items"
    :search-input.sync="search"
    cache-items
    class="mx-3"
    flat
    hide-no-data
    hide-details
    label="What items you looking for?"
    solo-inverted
    @change="selectChanged()"
  ></v-autocomplete>

        <v-flex xs12 sm6 lg2 v-for="(product,index) in products" :key="index">
          <v-card class="overlay_container">
            <v-img :src="product.image" aspect-ratio="1"></v-img>
            <v-card-title >
              <div style="width:100%;" class="text-xs-center">
                <h3 class="headline text-xs-center grey--text text--darken-3">{{product.item_name}}</h3>
                <h4 class="grey--text text--darken-3">${{product.price}}</h4>                                           
              </div>
            </v-card-title> 

            <v-card class="overlay">                       
                <h1 style="vertical-align:middle;">{{product.item_name}}</h1>                        
                <v-list class="details">
                <v-list-tile-action>
                    <v-btn style="width:100%"  :to="'/product/' + product.id">Details</v-btn>
                </v-list-tile-action>
                <v-list-tile-action>
                    <v-btn style="width:100%" color="primary" @click="addToCart(product)">Add To Cart</v-btn>
                </v-list-tile-action>
                </v-list>
            </v-card>        
          </v-card>                                           
        </v-flex>  




        // Script
        selectChanged(){              
            this.$router.push({name:'CategoryProduct', params:{category:this.select} })
        }

        // Show All Items
        let cref = db.collection('items').where("item_category","==",this.$route.params.category).orderBy('timestamp', 'desc')

        cref.onSnapshot(snapshot => {
          snapshot.docChanges().forEach(change => {
            if(change.type == 'added'){
              let doc = change.doc
              this.products.push({
                id:doc.id,
                item_name:doc.data().item_name,
                image:doc.data().image,
                category_name:doc.data().item_category.category_name,
                price:doc.data().price,
                quantity:doc.data().quantity,
                timestamp:moment(doc.data().timestamp).fromNow('lll')
              })
            }
          })
        })

这是完整的代码

TopNavbar.vue
https://codeshare.io/a3KXJv

类别产品.vue
https://codeshare.io/amE1kj

Answer 1

只需观察您的路线参数:

watch: {
    "$route.params.category"(value) {
      //Your code here
    }
  }