尝试将道具绑定到v模型 [英] Trying to bind props to v-model

问题描述

我正在使用vuetify.js并尝试创建一个可在整个应用程序中重用的组件.尽管它的工作绝对正常，但是我不确定这是否正确.

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.

我正在创建一个导航抽屉组件，该组件始终具有相同的菜单选项，但是可以从UI元素中打开它.

I am creating a navigation drawer component which has the same menu options all the time but it can be opened from UI elements.

下面是代码.

//NavigationBar.vue

// 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

//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".

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".

在子组件中，我使用的是vuetify.js导航抽屉，该抽屉采用v-model ="drawerFlag"，其中，cabinetFlag是计算属性.当我尝试使用v-model ="drawer"，即绑定到prop时，出现错误.然后，我们可以通过单击导航抽屉中的一个元素来关闭导航抽屉.为此，我正在调用该组件的方法，该方法随后会发出一个事件，该事件将被父组件侦听.

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.

推荐答案

我是这样解决的:

App.vue

<my-drawer ref="drawer"></my-drawer>
<my-header @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer"></my-header>

MyDrawer.vue

MyDrawer.vue

<v-navigation-drawer v-model="drawer">
...
data() {
  drawer: true
}

MyHeader.vue

MyHeader.vue

<v-toolbar-side-icon @click.stop="$emit('toggle-drawer')"></v-toolbar-side-icon>

---

在我看来，我们需要在自定义抽屉组件上使用 v-model ="drawer" ，以便它可以在所有屏幕尺寸上正常工作.

---

It seems to me that we need v-model="drawer" on custom drawer component so it can properly work on all screen sizes.

因此，我们还需要以某种方式从父级(或同级)更改其值，这就是为什么我使用 ref 在抽屉组件上.也许不用更改 $ refs.drawer.drawer 数据，我可以调用抽屉函数.我不确定哪种方法更好.但这是唯一适用于所有屏幕尺寸的简单解决方案.

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.

这篇关于尝试将道具绑定到v模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！