Vue js dynamically render router link path

Question

I'm struggling to find a way to render the path of the router-link dynamically, for example with the test variable. I'm trying to bind :to but unsuccessfully. I don't know if I can use the ternary operator in the binding as shown below:

<template>
  <div>
    <router-link
       :to="{ test ? '/success' : '/fail' }"
       tag="button"
       class="btn-next">
       <span class="btn-text">BUTTON</span>
    </router-link>
  </div>
</template>

<script> 
export default {
  // ...
  data: function() {
    return {
      test: false
    };
  }
}
</script>

tony19 · Accepted Answer · 2018-09-17 17:00:38Z

3

Your solution is close (you don't need the curly brackets). It should look like this:

<router-link :to="test ? '/success' : '/fail'">

demo

answered Sep 17, 2018 at 17:00

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js dynamically render router link path

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related