按钮单击问题

Question

我正在尝试使用：to将按钮引用到另一个页面。目前没有任何作用。出于测试目的，我现在尝试引用现有的/ learn页面。

我的代码：

  <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

您正在使用Vue路由器吗？我不是Vue.js专家，但是我相信v-bind:to属性用于<router-link>组件。对于使用<a>标签的常规链接，可以使用v-bind:href或:href分配链接：

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>