How can I add condition in array on vue.js 2?

Question

My vue component is like this :

<a :href="baseUrl+'/message/inbox'"
   :class="{ 'active': currentPath === '/message/inbox' }"
 >
    Message
</a>

If they meet the conditions then the message menu will be active

But, I want to make it like this :

<a :href="baseUrl+'/message/inbox'"
   :class="{ 'active': currentPath in array ('/message/inbox', '/message/inbox/detail') }"
 >
    Message
</a>

So it will check currentPath in the array

How can I do it?

Update :

If I have menu again like this :

<a :href="baseUrl+'/store/sale'"
   :class="{ 'active': currentPath in array ('/store/sale', '/store/sale/detail') }"
 >
    Sale
</a>

Or more menu

How to implement it?

Update 2

<a :href="baseUrl+'/message/inbox'"
   :class="{ 'active': isActive }"
 >
    Message
</a>

<a :href="baseUrl+'/store/sale'"
   :class="{ 'active': isActiveSale }"
 >
    Message
</a>

computed: {
  isActive () {
    return ['/message/inbox', '/message/inbox/detail'].indexOf(this.currentPath) > -1
  },
  isActiveSale () {
    return ['/store/sale', '/store/sale/detail'].indexOf(this.currentPath) > -1
  }
}

score 1 · Answer 1 · answered Mar 30 '17 at 08:09

1

Add a computed property.

computed: {
  isActive () {
    return ['/message/inbox', '/message/inbox/detail'].indexOf(this.currentPath) > -1
  }
}

So you'll be able to use:

<a :href="baseUrl+'/message/inbox'"
   :class="{ 'active': isActive }"
 >
    Message
</a>

answered Mar 30 '17 at 08:09

CD..

65,131
24
138
151

Can you exemplify using 2 menu. eg I have one menu again, that sale menu. The url like this : `/store/sale` – moses toh Mar 30 '17 at 08:29
@mosestoh You can create a computed property per menu item or pass an argument to the computed property. – CD.. Mar 30 '17 at 08:48
@CD.. "pass an argument to the computed property" : have you an example ? – Happyriri Mar 30 '17 at 12:32

Happyriri · Accepted Answer · 2017-03-30T09:58:22.453

You can use computed properties :

computed: {
    currentPathInInbox: function() {
        var arrayInbox = ['/message/inbox', '/message/inbox/detail'];
        return arrayInbox.indexOf(this.currentPath) > -1;
    }
}

and in template :

:class="{ 'active': currentPathInInbox }"

or with no computed properties :

:class="{ 'active': (currentPath === '/message/inbox' || (currentPath === '/message/inbox/detail')  }"

UPDATED :

I think you need component :

Vue.component( 'linkWithPath', {
 template: '<div><a :href="baseUrl + relativeUrl"' +
   ':class="{ \'active\': isActive }">' +
   '<slot>Link name</slot></a></div>',
  props: {
   baseUrl: { type: String },
    currentPath: { type: String, default: '' },
    relativeUrl: { type: String }
  },
  computed: {
   isActive: function() {
     return [ this.relativeUrl, this.relativeUrl + '/detail'].indexOf(this.currentPath) > -1;
    }
  }
});

Vue.component( 'listOfLinksWithPath', {
 template: '<div><link-with-path v-for="menuItem in menuArray"' +
  ':key="menuItem" :base-url="baseUrl" :current-path="currentPath"' +
  ':relative-url="menuItem.url">{{ menuItem.name }}</link-with-path></div>',
  props: {
   baseUrl: { type: String },
    currentPath: { type: String },
    menuArray: { type: Array }
  }
});

new Vue({
 el: "#app",
  data: function() {
   return {
     baseUrl: 'http://www.CHANGETHISURL.com',
      currentPath: '/message/inbox',
     menuArray: [ { name: 'Message', url: '/message/inbox' },
              { name: 'Sale', url: '/store/sale' } ]
    }
  },
  methods: {
   changeCurrentPath: function() {
     this.currentPath = '/store/sale'
    }
  }
});

a.active{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">

  <p>Link is active when it is red.</p>

  <list-of-links-with-path :base-url="baseUrl" :menu-array="menuArray" :current-path="currentPath"></list-of-links-with-path>
  
  <br />
  <button @click="changeCurrentPath" type="button">Change current path</button>
  <br />
  currentPath : {{ currentPath }}

</div>

Can you exemplify using 2 menu. eg I have one menu again, that sale menu. The url like this : `/store/sale` — moses toh, Mar 30 '17 at 08:30
@mosestoh Question updated : now you can simply add menuItem with adding object in menuArray in new Vue({}) — Happyriri, Mar 30 '17 at 10:00

How can I add condition in array on vue.js 2?

2 Answers2

UPDATED :