Решение, которое вы предоставили, не является правильным способом. Вы не должны изменять реквизиты напрямую. Используя v-модель = "ящик", вы привязываете реквизиты. Вы получите предупреждение в консоли при запуске vue.js в режиме разработки.
ользую vuetify.js и пытаюсь создать компонент, который можно повторно использовать в приложении. Хотя это работает абсолютно нормально, но я не уверен, что это правильный путь.
Я создаю компонент навигационной панели, в котором все время одни и те же пункты меню, но его можно открыть из элементов пользовательского интерфейса.
Ниже приведен код.
// NavigationBar.vue
<template>
<v-navigation-drawer
temporary
v-model="drawerFlag"
light
overflow
fixed
>
<v-list>
<v-list-tile>
<v-list-tile-action @click.stop="toggleDrawer()">
<v-btn icon>
<v-icon>close</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
<v-list class="pt-0">
<template v-for="item in items">
<v-list-tile :key="item.title" :to="item.link">
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-divider></v-divider>
</template>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
props: ['drawer'],
data() {
return {
items: [
{ title: 'Home', icon: 'home', link: '/home'},
{ title: 'History', icon: 'history', link: '/history' },
{ title: 'Wallet', icon: 'account_balance_wallet', link: '/wallet' },
{ title: 'My Profile', icon: 'person', link: '/profile' },
{ title: 'Settings', icon: 'settings', link: '/settings' },
{ title: 'About', icon: 'error', link: '/about' },
{ title: 'Logout', icon: 'power_settings_new', link: '/logout' },
]
};
},
computed: {
drawerFlag: {
get: function() {
return this.drawer
},
set: function() {
}
}
},
methods: {
toggleDrawer: function() {
this.$emit('emitToggleDrawer');
}
}
}
</script>
//Home.vue
<template>
<div class="full-screen">
<navigation-bar :drawer="drawer" v-on:emitToggleDrawer="toggleDrawer"></navigation-bar>
<v-btn icon class="mt-3 fixed-position" @click.stop="drawer = !drawer">
<v-icon>menu</v-icon>
</v-btn>
</div>
</template>
<script>
export default {
name: 'home',
data() {
return {
drawer: null
};
},
computed: {
user() {
return this.$store.getters.user;
}
},
methods: {
toggleDrawer: function () {
this.drawer = !this.drawer;
}
}
};
</script>
В приведенном выше коде ..
В родительском компоненте у меня есть кнопка, чтобы открыть навигационный ящик, и состояние навигационного ящика поддерживается в родительском компоненте, называемом «ящик». Затем я передаю «ящик» в качестве подпорки дочернему компоненту и метод для запуска события из дочернего компонента в родительский компонент с именем «emitToggleDrawer».
В дочернем компоненте я использую vuetify.js навигационный ящик, который принимает v-model = "boxFlag", где knifeFlag - вычисляемое свойство. Когда я пытался использовать v-модель = "ящик", то есть привязку к опоре, я получал ошибку. Затем мы можем закрыть навигационную панель, щелкнув элемент внутри навигационной панели. Чтобы добиться этого, я вызываю метод компонента, который в дальнейшем генерирует событие, которое прослушивается родительским компонентом.