vue 구성 요소에서 href로 조건을 추가하려면 어떻게 해야 하는가?

vue 구성 요소에서 href로 조건을 추가하려면 어떻게 해야 하는가?

다음과 같은 내 vue 구성 요소:

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

href에 조건을 추가하고 싶다.

유형이 'a'이면 href =

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

유형이 'b'이면 href =

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

어떻게 하면 좋을까?

또 다른 옵션은 계산된 속성을 생성하는 것이다.

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

절은 다음과 같다.

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

제3의 연산자가 이것을 위해 좋을 수 있다.예를 들면 다음과 같다.

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

또는, 사용v-if:

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

참조URL: https://stackoverflow.com/questions/46783021/how-can-i-add-condition-in-href-on-vue-component