如何在 vue.js 2 的数组中添加条件？

Question

我的 vue 组件是这样的：

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

如果满足条件，则消息菜单将处于活动状态

但是，我想变成这样：

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

所以它会检查数组中的currentPath

我该怎么做？

更新：

如果我有这样的菜单：

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

或更多菜单

如何实现？

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

Answer 1

您可以使用计算属性：

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

在模板中：

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

或者没有计算属性：

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

更新：

我认为你需要组件：

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>

Answer 2

添加计算属性。

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

这样你就可以使用了：

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