0

Почему в цикле когда я задаю to="item.href" значение item.href не передается?

<template>
    <v-app id="app">
        <v-app-bar app clipped-left color="indigo" dark>
            <v-app-bar-nav-icon v-on:click="drawer = !drawer"></v-app-bar-nav-icon>
            <span class="hidden-sm-and-down title mr-5 ml-5">
                TEST <span class="font-weight-light">APP</span>
            </span>
            <v-spacer></v-spacer>
            <v-badge left color="cyan">
                <template v-slot:badge>1</template>
                <v-icon color="grey lighten-1">mdi-email</v-icon>
            </v-badge>
        </v-app-bar>
        <v-navigation-drawer app clipped color="grey lighten-4" v-model="drawer">
            <v-list dense>
                <v-list-item v-for="item in items" v-bind:key="item.id" to="item.href">
                    <v-list-item-action>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-content>
            <v-container fluid>
                <div class="adm-content">
                    <v-breadcrumbs :items="breadcrumbs" divider="/" class="adm-breadcrumbs"></v-breadcrumbs>
                    <h1 class="title">Настройки профиля</h1>
                    <router-view></router-view>
                </div>
            </v-container>
        </v-content>
    </v-app>
</template>

<script>
    export default {
        data: () => ({
            drawer: null,
            items: [{
                id: 1,
                href: '#1',
                icon: 'mdi-view-dashboard',
                title: 'Панель управления'
            }, {
                id: 2,
                href: '#2',
                icon: 'mdi-settings',
                title: 'Настройки профиля'
            }, {
                id: 3,
                href: '#3',
                icon: 'mdi-apps',
                title: 'Список инструментов'
            }, {
                id: 4,
                href: '#4',
                icon: 'mdi-cash-multiple',
                title: 'Управление финансами'
            }, {
                id: 5,
                href: '#5',
                icon: 'mdi-help-circle',
                title: 'Служба поддержки'
            }],
            breadcrumbs: [{
                text: 'Панель управления',
                disabled: false,
                href: '#'
            }, {
                text: 'Настройки профиля',
                disabled: true,
                href: '#'
            }]
        })
    }
</script>

<style scoped>
    .adm-content {
        padding-left: 10px;
        padding-right: 10px;
    }
        .adm-breadcrumbs {
            padding-top: 9px;
            padding-left: 0px;
        }
</style>

1 ответ 1

0

Замените to="item.href" на :to="item.href" (сокращение от v-bind:) или v-bind:to="item.href" - вы передаете как статическое свойство, а нужно как динамическое. Хотя в коде вижу вы v-bind:key - сделали правильно

1
  • Спасибо!!!!!!!!
    – VueBeginer
    21 окт 2019 в 10:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.