[Vuejs]-How can I add condition in array on vue.js 2?

by

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>
👤Happyriri

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>
👤CD..

Leave a comment