Vue2: условно привязать ссылку к тегу A - PullRequest
Новая
       7

Vue2: условно привязать ссылку к тегу A

0 голосов
/ 09 октября 2018

Я могу успешно связать ссылки с тегами A, но, похоже, мои условия не нравятсяМое намерение - «НЕ связывать атрибут href, если pageName === item.name».Так или иначе, если я не напишу что-то вроде :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: {
    }
});

1 Ответ

0 голосов
/ 09 октября 2018

Я не рекомендую структуру, которую вы использовали для реализации навигации, но у меня есть обходной путь для вашей проблемы.Вы можете использовать теги <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>`,

Пример здесь (не обращайте внимания на остальные файлы в примере, только App.vue. Я жестко закодировал свойство pageName ради примера)

...