Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

60
Vistas
How to disable forward, backward button when there is no more routes in history in vue

Hi my app runs as a plugin inside another application so i have to handle forward,backward navigation manually.

My Question: i want to disable forward, backward button with .disabled class when there is no more route.

Any way i'm using history mode for going forward i'm using go(1) and for going backward i'm using go(-1)

Here are the steps to see my points:

  1. click on Browse ++ button 3 times
  2. now click on < 3 times at 3rd time it must be disabled
  3. now click on > 3 times at 3rd time it must be disabled

here is my code link

https://codesandbox.io/s/path-traversing-w6yy3f

7 months ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

I want to disable forward, backward button with .disabled class when there is no more route.

Div's can't be disabled. as you have div element for both backward and forward clicks.

Hence, For now I am removing the backward and forward div from the DOM as per the condition using v-if.

Working Demo : https://codesandbox.io/s/path-traversing-forked-dq3dte

7 months ago · Juan Pablo Isaza Denunciar

0

This works:

https://codesandbox.io/s/path-traversing-forked-djjbeb

unfortunately there is no way to get the current position you are on the browser history, so we need to track it somewhere.

This solution would only work however if the navigation happens trough your links, it does not work if the browser navigation is used.

EDIT

Fixed the issue with the console errors on opensandbox. The culprit was the :

 created() {
    console.log("thiss", this.$route);
  },

removing the console.log stops the log errors.

You can read and track the bug here https://github.com/codesandbox/codesandbox-client/issues/2095#issuecomment-818500869

7 months ago · Juan Pablo Isaza Denunciar

0

Probably the easiest way to do this is to store a variable referencing the current index and increment/decrement it when you navigate forward/backward.

backward() {
  currentIndex--;
  this.$router.go(-1);
},

forward() {
  currentIndex++;
  this.$router.go(1);
},
browse() {
  const param = this.getRandomTraversingObject();
  this.$router.push({ name: "traverse", params: param });
  console.log(this.$router, this.$router.history.length);
  currentIndex++;
},

Then just bind the .disabled class to currentIndex...

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos