如何在 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: {
  isActive () {
    return ['/message/inbox', '/message/inbox/detail'].indexOf(this.currentPath) > -1
  }
}

因此您将能够使用：

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

Answer 2

您可以使用计算属性：

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>

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

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

vue.js

vue-component

vuejs2

更新：