[Vuejs]-I'm trying to make my button a route that shows a modal, but I want to stay on the same page

by

0👍

I haven’t tested this but it would be something like this.

<script setup>
    import {Sunny, Moon} from '@element-plus/icons-vue'
    import { ref, onMounted } from 'vue'
    import { RouterLink } from 'vue-router'
    import Home from '../views/Home.vue'
    import { pokeStore } from '../store/store'
    import VueCookies from 'vue-cookies'
    import axios from 'axios';
    import Pokedex from './Pokedex.vue'

    const pokedexVisible = ref(false)
    const PokemonStore = pokeStore();

    let allpokemons = []

    async function GetAllPokemons() {
        try {
            let response = await PokemonStore.getPokemonData();
            allpokemons.value = response.data.results;
            let randomPokemon = allpokemons.value[Math.floor(Math.random() * 151) + 1]
            console.log(randomPokemon)
        } catch (error) {
            throw error;
        }
    }

    GetAllPokemons()


    import { LoginModal } from 'somewhere/LoginModal.vue';

    const showLoginModal = ref(false);

</script>

<template>
    <el-header class="navbar">
        <div class="navbar-content">
            <div>
                <router-link to="/" custom v-slot="{ navigate }">
                    <img @click="navigate" role="link" class="logo" src="/src/assets/images/logo.png" />
                </router-link>
            </div>
            <el-space size="large">
                <div>
                    <input class="search" type="text" placeholder="Search pokemon" />

                </div>
                <div>
                    <el-button link><el-icon :size="20">
                        <Sunny />
                    </el-icon></el-button>
                    <el-button link><el-icon :size="20">
                        <Moon />
                    </el-icon></el-button>
                </div>
                <div>
                    <el-button @click="pokedexVisible = true" class="pokedexBtn">Pokedex</el-button>
                    <!-- <router-link  @click="pokedexVisible = true" to="/pokedex" class="nav-link">Pokedex</router-link> -->
                </div>
                <div>
                    <el-button @click.prevent="showLoginModal = true" text>LogIn</el-button>
                </div>
            </el-space>
        </div>
    </el-header>
    <LoginModal v-if="showLoginModal">
</template>

Leave a comment