Vue2：有条件地将href绑定到A标签

Question

我可以成功地将链接绑定到 A 标签，但它似乎不喜欢我的条件。我的意图是“如果pageName === item.name 不绑定href 属性”。不知何故，除非我写像 :href="pageName === item.name ? 'some text here' : item.link" 这样的东西，否则它总是呈现 href。

例如，如果pageName = 'listing'，我期望<a href=""></a>，但我得到<a href="/listing"></a>。不知道我做错了哪一部分。

理想情况下，如果pageName = 'listing'，我希望<a></a>，但我不知道如何实现它。提前致谢。

var globalNav = {
    props: ['pageName'],
    template:  `<div id="global-nav">
                    <a 
                            class="nav-item"
                            v-for="(item, i) in items"
                            :key="i + 1"
                            :active="pageName === item.name"
                            :href="pageName === item.name ? '' : item.link"
                    >
                        <i :class="item.icon"></i>
                        <div class="tooltip">
                            <div class="arrow"></div>
                            {{ item.title }}
                        </div>
                    </a>
                </div>`,
    data() {
        return {
            items: [
                {
                    title: 'Dashboard',
                    icon: 'icon-home',
                    link: '/',
                    name: 'dashboard'
                },
                {
                    title: 'Listing',
                    icon: 'icon-listing',
                    link: '/listing',
                    name: 'listing'
                },
                {
                    title: 'Import',
                    icon: 'icon-stackoverflow',
                    link: '/import',
                    name: 'import'
                },
                {
                    title: 'Settings',
                    icon: 'icon-cog',
                    link: '/settings',
                    name: 'settings'
                },
            ]
        };
    }
};

var header = new Vue({
    el: '#header',
    components: {
        'global-nav': globalNav
    },
    data: {
        pageName: pageName
    },
    methods: {
    }
});

Answer 1

我不推荐您用于实现导航的结构，但我有一个解决您的问题的方法。 您可以在 a 标签上使用带有 v-if 条件的 <template> 标签，如下所示：

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

示例here（不要介意示例中的其余文件，只需要App.vue。为了示例，我对pageName 属性进行了硬编码）