[Vuejs]-Vue2: Conditionally bind href to A tag

by

0👍

✅

I don’t recommend the structure you used for your implementation of navigation but I have a workaround for your problem.
You can use <template> tags with v-if condition on a tags like this:

template:  `<div id="global-nav">
                <template  v-for="(item, i) in items">
                    <a v-if="pageName !== item.name"
                            class="nav-item"
                            :key="i + 1"
                            :active="pageName === item.name"
                            :href="item.link">
                        <i :class="item.icon"></i>
                        <div class="tooltip">
                            <div class="arrow"></div>
                            {{ item.title }}
                        </div>
                    </a>
                    <a v-else>
                     <i :class="item.icon"></i>
                        <div class="tooltip">
                            <div class="arrow"></div>
                            {{ item.title }}
                        </div>
                    </a>
                </template>
            </div>`,

Example here (don’t mind the rest of the files in the example, only the App.vue. I hardcoded the pageName property for the sake of the example)

Leave a comment