Изменение параметра маршрута 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

CategoryProduct.vue
https://codeshare.io/amE1kj

Answer 1

Просто посмотрите ваш параметр маршрута:

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

Answer 2

<template>
  <v-layout>
    <v-container  grid-list-lg>
      <v-layout row wrap>  
        
        <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>        
      </v-layout>
    </v-container>
  </v-layout>
</template>
   
<script>
  import firebase from "firebase";
  import moment from 'moment' 
  export default {    
    data(){
      return{
        products:[],
        cart:this.$store.getters.cart 
      }
    },
    methods: {
        productInCart(product) {
            const cartItems = this.cart
            for (let i = 0; i < cartItems.length; i++) {
              if (cartItems[i].product.id === product.id) {
                return i       
              }
            }
            return null
        },      
        addToCart(product, quantity){
            const index = this.productInCart(product)
            const productQuantity = (!quantity || quantity < 1) ? 1 : parseInt(quantity)
            if (index === null) {
                var items = {
                    product: product,
                    quantity: productQuantity
                }
                //this.$store.commit('catalog/updateCart', items)
                this.$store.commit('updateCart', items)
            }else {
                if(!quantity){
                    // If item is already into the cart then add++ quantity                   
                    this.$store.commit('increaseQuantity', index)
                    
                }else{
                    // When quantity updated manually
                }
            }        
        },
        removeCart(index){
            this.$store.commit('removeCart', index)     
        }, 
        onSelectedCategory(category) {
          var db = firebase.firestore();
        // Current Currency   
        db.collection("settings").doc('config').onSnapshot(doc =>{
          this.currency = doc.data().currency
        })
      

        // Show All Items
        let cref = db.collection('items').where("item_category","==",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')
              })
            }
          })
        })
        }
    },
    computed:{
      
    },   
    created () {
      this.onSelectedCategory(this.$route.params.category)
    },
    watch: {
      '$route.params.category'(value) {
        this.onSelectedCategory(value)
      }
    }
  }
</script>

<style>
  
</style>