尝试将 props 绑定到 v-model [英] Trying to bind props to v-model
问题描述
我正在使用 vuetify.js 并尝试创建一个可以在整个应用程序中重复使用的组件.虽然它工作得很好，但我不确定这是否是正确的方法.
我正在创建一个导航抽屉组件，它始终具有相同的菜单选项，但可以从 UI 元素打开.
下面是代码.
//NavigationBar.vue
<v-导航抽屉暂时的v-model="drawerFlag"光溢出固定的><v-list><v-list-tile><v-list-tile-action @click.stop="toggleDrawer()"><v-btn 图标><v-icon>关闭</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></v-list></v-navigation-drawer><脚本>导出默认{道具:['抽屉']，数据() {返回 {项目: [{标题:'家'，图标:'家'，链接:'/家'}，{ 标题:'历史'，图标:'历史'，链接:'/历史'}，{ 标题:'钱包'，图标:'account_balance_wallet'，链接:'/wallet' }，{ title: 'My Profile', icon: 'person', link: '/profile' },{标题:'设置'，图标:'设置'，链接:'/设置'}，{标题:'关于'，图标:'错误'，链接:'/关于'}，{ title: '注销', 图标: 'power_settings_new', 链接: '/logout' },]};},计算:{抽屉标志:{得到:函数(){返回 this.drawer},设置:函数(){}}},方法: {切换抽屉:函数(){this.$emit('emitToggleDrawer');}}}//Home.vue
<div class="全屏"><navigation-bar :drawer="drawer" v-on:emitToggleDrawer="toggleDrawer"></navigation-bar><v-btn icon class="mt-3 fixed-position" @click.stop="drawer = !drawer"><v-icon>菜单</v-icon></v-btn><脚本>导出默认{name: '家',数据() {返回 {抽屉:空};},计算:{用户(){返回 this.$store.getters.user;}},方法: {切换抽屉:函数(){this.drawer = !this.drawer;}}};
在上面的代码中..
在父组件中，我有按钮打开导航抽屉，导航抽屉的状态在名为抽屉"的父组件中维护.然后，我将抽屉"作为道具传递给子组件，并传递一个方法来触发从子组件到父组件的事件，称为emitToggleDrawer".
在子组件中，我使用 vuetify.js 导航抽屉，它采用 v-model="drawerFlag"，其中 drawerFlag 是一个计算属性.当我尝试使用 v-model="drawer" 即绑定到道具时，我遇到了错误.然后我们可以通过单击导航抽屉内的元素来关闭导航抽屉.为了实现这一点，我调用了组件的一个方法，该方法稍后会发出一个由父组件侦听的事件.
我是这样解决的:
App.vue
<my-drawer ref="drawer"></my-drawer><my-header @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer"></my-header>MyDrawer.vue
...数据() {抽屉:真的} MyHeader.vue
<v-toolbar-side-icon @click.stop="$emit('toggle-drawer')"></v-toolbar-side-icon><小时>在我看来，我们需要在自定义抽屉组件上使用 v-model="drawer" 以便它可以在所有屏幕尺寸上正常工作.
因此我们也需要以某种方式从父(或兄弟)更改它的值，这就是为什么我使用 ref 在抽屉组件上.也许不是更改 $refs.drawer.drawer 数据，我可以调用 drawers 函数.我不确定什么是更好的方法.但这是唯一适用于所有屏幕尺寸的简单解决方案.
所以就我而言，我仅从标题更改抽屉状态，但我认为您可以使用它并根据您的需要进行调整.
I am using vuetify.js and trying to create a component which can be reusable across the application. Although its working absolutely fine, but I am not sure if it's the correct way.
I am creating a navigation drawer component which has the same menu options all the time but it can be opened from UI elements.
Below is the code.
// 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>
In the above code..
In parent component, I have button to open navigation-drawer and the state of the navigation drawer is maintained in the parent component called "drawer". Then, I am passing "drawer" as a prop to child component and a method to trigger an event from child component to parent component called "emitToggleDrawer".
In child component, I am using vuetify.js navigation-drawer which takes v-model="drawerFlag", where drawerFlag is a computed property. When i tried to use v-model="drawer" i.e. binding to the prop I was getting an error. Then we can close the navigation drawer by clicking an element inside the navigation-drawer. To achieve that, I am calling a method of the component which later on emits an event which is listened by parent component.
I solved it like this:
App.vue
<my-drawer ref="drawer"></my-drawer>
<my-header @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer"></my-header>
MyDrawer.vue
<v-navigation-drawer v-model="drawer">
...
data() {
drawer: true
}
MyHeader.vue
<v-toolbar-side-icon @click.stop="$emit('toggle-drawer')"></v-toolbar-side-icon>
It seems to me that we need
v-model="drawer" on custom drawer component so it can properly work on all screen sizes.
Thus we need to change it's value from parent (or sibling) somehow also, that's why I'm using ref on drawer component.
Maybe instead of changing $refs.drawer.drawer data I could call drawers functions instead. I'm not sure what would be better approach. But this was the only simple solution that worked for me on all screen sizes.
So in my case, I'm changing drawer state only from header, but I think you can use this and fit according to your needs.
这篇关于尝试将 props 绑定到 v-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
