Блог

Главная - Вопросы по программированию - VueJS генерирует случайные «пробелы» в цикле списка

VueJS генерирует случайные «пробелы» в цикле списка

#vue.js #dom #whitespace

Вопрос:

У меня есть эта странная проблема, когда мой v-if цикл генерирует случайное whitespace в DOM. Я также могу визуально видеть это (см. Изображение). Вы видите пробел слева от ссылки на загрузку. Код, используемый для создания ссылок, довольно прост, но я не могу понять, откуда берутся пробелы. Есть какие-нибудь идеи? Или я делаю что-то не так? Я также попытался сбросить кэш, чтобы посмотреть, исправило ли это, но нет.

 <template>
    <nav class="navbar">
        <ul class="nav">
            <li class="nav-item nav-brand">
                <router-link class="brand nav-link" :to="{ name: 'home' }">{{ this.$appName }}</router-link>
            </li>

            <template v-for="(link, index) in links">
                <li class="nav-item" :key="index">
                    <router-link class="nav-link" :to="{ name: link.name }">{{ link.title }}</router-link>
                </li>
            </template>
        </ul>
    </nav>
</template>

И вот как я использую шаблон:

 <AppNavigation :links="[
    { name: 'upload', title: 'Upload' },
    { name: 'login', title: 'Login' }
]" />
 
 <style lang="scss">

    // Import variables and mixins
    @use '../../scss/vars'; 
    @use '../../scss/mixins';

    .navbar {
        height:vars.$headerHeight;

        .nav {
            margin:0;
            padding:0;
            list-style:none;
            height:inherit;
        }

        .nav-brand {
            .brand {
                background:-moz-linear-gradient(-35deg, #33b2d9 0%, #e368f5 100%);
                background-size:100% 100%;
                transition:background-size .25s ease-in-out!important;
                            
                amp;:hover {
                    background:-moz-linear-gradient(-35deg, #33b2d9 0%, #e368f5 100%)!important;
                    background-size:100% 200%!important;
                }
            }
        }

        .nav-item {
            display:inline-flex;
            height:inherit;
            
            .nav-link {
                height:100%;
                display:flex;
                align-items:center;
                padding:0 20px;
                color:vars.$navLinkColor;
                font-size:vars.$navLinkSize;
                transition:background .05s ease-in-out;

                amp;:hover {
                    background:lighten(vars.$navItemBg, 5%);
                }
            }
        }
    }
</style>

Комментарии:

1. Вы используете библиотеку стилей или можете включить стили?

2. Я использую библиотеку Normalize глобально, и я включил стиль компонента.

3. Можете ли вы предоставить песочницу или живую демонстрацию? Другим людям легче отлаживать ваш код таким образом.

4. у вас есть пробелы в шаблоне, удалите его, также поместите v-для на li удаление второго шаблона

5. @MajedBadawi Я посмотрю, смогу ли я позже разместить проект на домене. @LawrenceCherone Удалил дополнительный шаблон и добавил цикл for непосредственно к <li> элементу. Никаких изменений. Также удалил пробелы в шаблоне, ничего не изменилось.

Ответ №1:

Я воспроизвел проблему, имея предварительно <li> определенный элемент. Затем, вслед за этим, a v-for на <li> элементе. Подобный этому:

 <li ...>Test</li>
<li v-for="" ...></li>

Пробелы добавляются над v-for .

Решите эту проблему, просто добавив бренд в список ссылок, которые будут отображаться, и удалив предварительно определенный элемент бренда.

Метки: