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>。不确定我做错了哪一部分。

理想情况下，我希望<a></a>是pageName = 'listing'，但我不知道如何实现。预先感谢。

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

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

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属性进行了硬编码）

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

1 个答案: