Wie kann ich Bedingung in href auf vue-Komponente hinzufügen?

Question

Meine vue Komponente wie folgt aus:

<template> 
    <ul class="nav nav-tabs nav-tabs-bg"> 
     <li role="presentation"> 
      <a :href="baseUrl+'/search/store/'+param"> 
       Store 
      </a> 
     </li> 
    </ul> 
</template> 

<script> 
    export default { 
     props: ['type', 'param'], 
    } 
</script> 

Ich möchte href

Wenn Typ Bedingung hinzuzufügen = 'a' dann href =

<a :href="baseUrl+'/search/store/'+param">Store</a> 

Wenn type = 'b' dann href =

<a href="javascript:">Store</a> 

Wie kann ich es tun?

Answer 1

Eine weitere Option ist berechnete Eigenschaft zu erstellen:

<script> 
    export default { 
     props: ['type', 'param'], 
     computed: { 
      url() { 
      return this.type === 'a' 
       ? `${this.baseUrl}/search/store/${this.param}` 
       : 'javascript:' 
      } 
     } 
    } 
</script> 

und Tempel wird sein:

<a :href="url">Store</a> 

Answer 2

Ternäre Operatoren können dafür gut sein. Zum Beispiel:

<a :href="type == 'a' ? baseUrl+'/search/store/'+param : 'javascript:'">Store</a> 

Alternativ verwenden v-if:

<a v-if="type == 'a'" :href="baseUrl+'/search/store/'+param">Store</a> 
<a v-else-if="type == 'b'" :href="'javascript:'">Store</a>