Show element by first-letter from API after click on router-link Vue2

Question

I want to show only elements that start on letter i click. Now it's working but every time I click on letter i have to refresh page to show elements. Maybe i should use mounted but i don't know how.........

<template>
<div>
    <div class="d-flex px-2 pt-5 flex-wrap justify-center">
        <div class="text-style mb-5">
            <p class="text-center text-body-1 font-weight-bold">Choose letter...</p>
            <v-divider></v-divider>
            <router-link
            class="mx-1 router-text text-h4 font-weight-bold amber--text text-darken-5"
                :to="{ name: 'byLetter', params: { letter } }"
                v-for="letter in letters"
                :key="letter">
                {{ letter }}
            </router-link>
        </div>
    </div>
    <v-row>
        <v-col v-for="beer in filteredBeers" :key="beer.id" cols="6">
            <v-card outlined class="d-flex flex-column justify-space-around">
                <v-card-item>
                    <h2 class="ml-3 text-h5 font-weight-bold mt-3 mb-3">
                        {{ beer.name }}
                        <v-avatar>
                        <v-img :src="beer.image_url" alt="John"></v-img>
                        </v-avatar>
                    </h2>
                    <v-divider></v-divider>
        <v-card-text class="mb-0 d-flex flex-row align-center justify-space-around">
<p class="text-h6 mb-0"><v-icon color="orange">mdi-percent-outline</v-icon> Volume: {{ beer.abv }}%</p>
                        <p class="text-h6 mb-0">
<v-icon color="orange">mdi-silverware-fork-knife</v-icon> Food pairing: {{ beer.food_pairing[0] }}
                        </p>
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions class="d-flex justify-center">
                        <v-hover v-slot="{ hover }">
                            <router-link class="router" :to="{ name: 'details', params: beer }">
                                <v-btn style="transition: 0.3s" :style="{ 'background-color': hover ? 'orange' : 'white' }" outlined>
                                    <v-icon>mdi-magnify</v-icon>
                                    Szczegóły
                                </v-btn>
                            </router-link>
                        </v-hover>
                    </v-card-actions>
                </v-card-item>
            </v-card>
        </v-col>
    </v-row>
</div>
</template>
<script>

import axiosClient from '@/axiosClient'

export default {
data() {
    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
    return {
        letter: this.$route.params.letter,
        beers: [],
        letters,
    }
},

created() {
    axiosClient.get(`beers?beer_name=${this.letter}`).then(response => {
        this.beers = response.data
    })
},
computed: {
    filteredBeers: function () {
        return this.beers.filter(beer => {
            return beer.name.startsWith(`${this.letter}`)
        })
    },
},
}
</script>

I tried use mounted but maybe i did it wrong...................................................

Answer 1

That's because you stay on the same page, only the :letter route param changes and Vue doesn't re-render everything since he knows it's the same page.

You can use a watcher to react to the route param changes:

watch: {
  '$route.params.letter'(newLetter) {
    this.letter = newLetter
  }
}

So when the parameter changes, it will update the letter component data and trigger the re-render.