첫 번째 문자 Vue 2에서 시작하는 요소 표시

첫 번째 문자 Vue 2에서 시작하는 요소 표시

문자에서 시작하는 요소만 표시하고 싶습니다.

    <template>
    <div>
        <div class="d-flex px-2 pt-5 flex-wrap justify-center">
            <router-link
                class="mx-1 router-text"
                :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 beers" :key="beer.id" cols="6">
                <v-card class="d-flex flex-column justify-space-between"height="200">
                        <h2 class="ml-3 mt-3">
                            {{ beer.name }}
                            <v-avatar>
                            <v-img :src="beer.image_url" alt="John"></v-img>
                            </v-avatar>
                    </h2>
                <div class="px-5 d-flex text-center align-center justify-space-between">
                    <p>Volume: {{ beer.abv }}%</p>
                <p class="px-7 food">Food pairing: <br />{{ beer.food_pairing }}</p>
                <router-link class="router" :to="{ name: 'details', params: beer }">
                                <v-btn outlined>
                                    <v-icon>mdi-magnify</v-icon>
                                    Szczegóły
                                </v-btn>
                            </router-link>
                        </div>
                    </v-card>
                </v-col>
            </v-row>
        </div>
    </div>
    </template>
    <script>
    // Imports

    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
            console.log(this.beers)
        })
    },
    computed: {
        filteredBeers: function () {
            return this.beers.filter(beer => {
                return beer.name.startsWith(`${this.letter}`)
            })
        },
    },
    }
    </script>

브라우저

startsWith()를 추가하려고 했지만 여전히 해당 문자로 시작하지 않는 문자가 포함된 모든 요소가 표시됩니다.제가 어떤 기능을 사용해야 할까요?모르겠어요.도움을 요청합니다.

또한 편지를 클릭한 후 자동으로 새로 고쳐지려면 어떻게 해야 합니까?

당신의v-for반복적으로beers,것은 아니다.filteredBeers

언급URL : https://stackoverflow.com/questions/75542352/display-elements-which-starts-on-first-letter-vue-2