current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

The idea is to have 'isActive' boolean array in the Vue instance in order to update it every time the navbar gets loaded, i.e using the current page name taken from the URL as an index in the array and set it's value to true; and 'onbeforeunload' setting it to false.

Navbar.vue

<template>
  <div class="navbar">
    <nav>
      <ul>
        <li v-bind:class="{ active: isActive['login'] }">
          <a href="/login">Log in</a>
        </li>
        <li v-bind:class="{ active: isActive['signup'] }">
          <a href="/signup">Sign up</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>    
  import Vue from 'Vue'

  var navbarOpts = {
    name: 'navbar',
    data {
      return {
        isActive: []
      }
    }
  })
  module.exports = navbar

  function pageName(pathname) {} // Returns no-spaced string

  var currentPage = pageName(window.location.pathname)

  if (currentPage !== '') { // If not in home page
    navbar.data().isActive[currentPage] = true
    window.onbeforeunload = function () {
      navbar.data().isActive[currentPage] = false
    }
  }
</script>

Here I would reactively update the current page index (example: 'login') in the array to true, and as new pages get visited (example: 'signup') they will get added as indexes and set to true; and set to false before unloading resources.

Maybe I should use Vue.set(vm.isActive, currentPage, false) so a new property is reactively added to vm.isActive if it doesn't exist or updated. The problem is there is no point in me creating a Vue instance since I can't export it. And if I modify the navbarOpts and export it like I did, navbarOpts gets created everytime Navbar.vue is rendered and everything it holded gets lost.

share|improve this question
1  
If StackOverflow doesn't help, you may also want to try the Gitter chat: gitter.im/vuejs/vue ; they're super helpful there. – Christopher Shroba yesterday
up vote 1 down vote

You don't use the single file component format correctly. You create a component instance and export that, where you should only export the options object used to create a component ( the object that you pass to new Vue({... This object })

share|improve this answer
    
Great, that was the problem. The solution would be to save in navbar the object I was previously passing to the Vue constructor and then export it. Now, I can't use any of the methods of Vue like arr.$set or Vue.set to reactively add indexes to the array right? – nxbarz yesterday
    
You can use all of these methods, don't worry. – Linus Borg yesterday
    
I updated the code and better described the problem, is there a way to solve it that way? I figured out another way but I really want to know if what I described is posible. – nxbarz yesterday
up vote 0 down vote

I finally solved it using another approach I think is more correct.

Navbar.vue

<template>
  <div class="navbar">
    <nav>
      <ul>
        <li v-bind:class="{ active: isActive('login') }">
          <a href="/login">Log in</a>
        </li>
        <li v-bind:class="{ active: isActive('signup') }">
          <a href="/signup">Sign up</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
  export default {
    name: 'navbar',
    data () {
      return {
        path: window.location.pathname
      }
    },
    methods: {
      isActive (page) {
        return this.currentPage === page
      }
    },
    computed: {
      currentPage () {
        if (this.path.length === 1) return ''
        const endIndex = this.path.indexOf('/', 1)
        return (endIndex === -1)
          ? this.path.substring(1)
          : this.path.substring(1, endIndex)
      }
    }
  }
</script>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.