search

kzima / vuestrap-base-components

Web components that extend Bootstrap 4 - http://kzima.github.io/vuestrap-base-components/#/accordion
MIT License
253 stars 42 forks source link

Navbar links bit confusing #24

Open tvld opened 8 years ago

tvld commented 8 years ago

As per the closed issue #19,

 <vs-navbar fixed="top" type="dark" variant="primary" full>
     <a class="navbar-brand" href="#">&nbsp;</a>
     <vs-nav type="navbar" :vertical="false" class="pull-sm-right">
       <vs-nav-item link="#" active>Active</vs-nav-item>
         <vs-nav-item link="http://www.google.com">Link</vs-nav-item>
         <vs-nav-item link="www.google.com">Another Link</vs-nav-item>
         <vs-nav-item link="href='www.google.com'" >Strange</vs-nav-item>
     </vs-nav>
   </vs-navbar>

Although the click works with the second link, the hover shows all "#"

tvld commented 8 years ago

Except for the undesired hover "tooltip", this works ok:

<template>

  <div class="navbar-wrapper">
   <vs-navbar fixed="top" type="dark" variant="primary" full>
     <a class="navbar-brand" href="#">&nbsp;</a>
     <vs-nav type="navbar" :vertical="false" class="pull-sm-right">
       <vs-nav-item v-for="navitem in navitems" :link="navitem.url">
         {{ navitem.label }}
       </vs-nav-item>
     </vs-nav>
   </vs-navbar>
  </div>

</template>

<script>

  import vuestrapBase from 'vuestrap-base-components'

  export default {
    components: {
      'vs-navbar': vuestrapBase.navbar,
      'vs-nav': vuestrapBase.nav,
      'vs-nav-item': vuestrapBase.navItem
    },
    data () {
      return {
        navitems: [
          { label: 'Home', url: 'http://yahoo.com' },
          { label: 'About us', url: 'http://www.google.com' }
        ]
      }
    }
  }
</script>