Button click issue

Question

I am trying to refer the button to another page using:to. It doesn't do anything at the moment. For testing purposes I'm now trying to refer to the existing /learn page.

My code:

  <b-navbar-item tag="div">
                <div class="buttons">
                    <a class="button is-primary"
                v-for="item in menuItems" 
                :key="item.title"
                :to="item.link">
                        {{item.title}}
                        </a>    
                </div>
            </b-navbar-item>

export default {
    data() {
      return {
           menuItems: [
       { title: 'Login', link: '/learn'},
       { title: 'Sign up', link: '/learn'},
       { title: 'Logout', link: '/learn'},

      ]
      }

Answer 1

Are you using Vue Router? I'm not a Vue.js expert, but I believe the v-bind:to attribute is used on <router-link> components. For regular links using the <a> tag, you can use v-bind:href or :href to assign the link:

 new Vue({ el: '#app', data: { menuItems: [{ title: 'Login', link: '/link1' }, { title: 'Sign up', link: '/link2' }, { title: 'Logout', link: '/link3' }, ] } })

 <script src="https://unpkg.com/vue"></script> <div id="app"> <div class="buttons"> <a class="button is-primary" v-for="item in menuItems":key="item.title":href="item.link"> {{item.title}} </a> </div> </div>

Answer 2

For this to work you need to use VueRouter and instead of the <a> tag you need to use the <router-link> component. If you really need to use a <a> tag you can also use the scoped-slot of <router-link>

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>