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
  }
}

Happyriri · Accepted Answer · 2017-03-30 09:58:22Z

1

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>

edited Mar 30, 2017 at 9:58

answered Mar 30, 2017 at 8:14

Happyriri

4,4532 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

moses toh Over a year ago

Can you exemplify using 2 menu. eg I have one menu again, that sale menu. The url like this : /store/sale

Happyriri Over a year ago

@mosestoh Explain what you want exactly.

Happyriri Over a year ago

@mosestoh Question updated : now you can simply add menuItem with adding object in menuArray in new Vue({})

moses toh Over a year ago

Thanks. I will try it

CD.. · Accepted Answer · 2017-03-30 08:09:10Z

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, 2017 at 8:09

CD..

74.4k25 gold badges160 silver badges170 bronze badges

3 Comments

moses toh Over a year ago

Can you exemplify using 2 menu. eg I have one menu again, that sale menu. The url like this : /store/sale

CD.. Over a year ago

@mosestoh You can create a computed property per menu item or pass an argument to the computed property.

Happyriri Over a year ago

@CD.. "pass an argument to the computed property" : have you an example ?

Collectives™ on Stack Overflow

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

2 Answers 2

UPDATED :

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATED :

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related