Change page content when clicking on link in Vuejs

Asked

Viewed 941 times

2

I have an email application and I have a side menu with all the mailboxes that will be available to the user. Here’s a screenshot:

Atualmente está na caixa de entrada

What I want to do is:

Each time I select (click) an item from that menu it reloads only the content of the page, without reloading the page as a whole, ie change only what the user is seeing without reloading the whole page.

It is possible??

javascript front-end vue.js client-side

  • I believe that with the use of Ajax helping Vue.js you can do what you want.

  • Okay, I’ll look into it, thanks for your help

1 answer

2


You can hide and show the blocks according to the place you are selecting or make a route system, in the case of Vue, use the Vue-router

A simple example of how to hide/show blocks can be as follows:

<div id="app">
  <a href="#" v-on:click="deixarAtivo('div1')">Carros</a>
  <a href="#" v-on:click="deixarAtivo('div2')">Marcas</a>

  <div class="div1" v-show="estaAtiva('div1')">
    Conteudo 1
  </div>

  <div class="div2" v-show="estaAtiva('div2')">
    Conteudo 2
  </div>
</div>

<script>
    var app = new Vue({
            el: '#app',
            data: {
                mostrar: 'div1',
            },
           methods: {
                deixarAtivo: function(val) {
                    this.mostrar = val;
                },
                estaAtiva: function(val) {
                    return this.mostrar === val;
                },
            }
   });
</script>

  • I understood the logic, but to do this it has to be as follows: For each email box I create a component(.Vue) and each time it is clicked on the chosen option the component to be rendered??

Browser other questions tagged javascript front-end vue.js client-side

You are not signed in. Login or sign up in order to post.