@change事件時Vue路線參數更改，但組件未受影響

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

只需查看您的route參數：

 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>