如何正确设置 Vuetify 框架的两个导航抽屉？

Question

在我的Vue.JS 应用程序中，我尝试使用Vuetify 框架中的两个v-navigation-drawer。出于某种原因，我的下一个代码引发了错误。就我而言，每个侧边栏都在一个单独的组件中。如何解决此类错误？

错误：

vue.esm.js?efeb:628 [Vue 警告]：避免直接改变 prop，因为 每当父组件时，该值将被覆盖 重新渲染。相反，使用基于 道具的价值。正在变异的道具：“打开”

BaseLayout.vue：

<template>
  <div>
    <v-app-bar app>
      <v-btn
        icon
        @click.stop="openLeftNavigationDrawer=!openLeftNavigationDrawer">
        <v-icon>mdi-map-clock-outline</v-icon>
      </v-btn>

      <v-spacer></v-spacer>

      <v-btn
        icon
        @click.stop="openRightNavigationDrawer=!openRightNavigationDrawer">
        <v-icon>mdi-filter</v-icon>
      </v-btn>
    </v-app-bar>

    <left-navigation-drawer
      :open="openLeftNavigationDrawer">
    </left-navigation-drawer>

    <right-navigation-drawer
      :open="openRightNavigationDrawer">
    </right-navigation-drawer>

    <v-content style="padding:unset!important;">
      <slot></slot>
    </v-content>
  </div>
</template>

<script>
import LeftNavigationDrawer from '../elements/LeftNavigationDrawer'
import RightNavigationDrawer from '../elements/RightNavigationDrawer'

export default {
  name: 'BaseLayout',
  components: {
    LeftNavigationDrawer,
    RightNavigationDrawer
  },
  data: function () {
    return {
      openLeftNavigationDrawer: false,
      openRightNavigationDrawer: false
    }
  }
}
</script>

LeftNavigationDrawer.vue：

<template>
  <v-navigation-drawer
    v-model="open"
    absolute
    left>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'LeftNavigationDrawer',
  props: {
    open: false
  }
}
</script>

RightNavigationDrawer.vue：

<template>
  <v-navigation-drawer
    v-model="open"
    absolute
    right>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'RightNavigationDrawer',
  props: {
    open: false
  }
}
</script>

Answer 1

在你LeftNavigationDrawer和RightNavigationDrawer组件中，当你写v-model="open"时，它允许v-navigation-drawer组件改变open的值。

但是，在 VueJS 中，一个组件是不允许改变它的 props 值的。只有父母才能做到这一点。因为open 是一个道具，而v-navigation-bar 正在尝试更改它，所以您会看到错误Avoid mutating a prop...。

为了修复它，您可以在发送到v-navigation-drawer 的组件中定义data。像这样的：

// RightNavigationDrawer.vue/LeftNavigationDrawer
<template>
  <v-navigation-drawer
    v-model="drawerOpen"
    @input="onInput"
    absolute
    right>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'RightNavigationDrawer',
  props: {
    open: {
       type: Boolean,
       default: false
    }

  },
 data(){
   return {
      drawerOpen: this.open
   }
 },
 watch:{
   open(newVal){
      this.drawerOpen = newVal
   }
 },
 methods:{
   onInput(isOpen){
      this.$emit('drawerOpened', isOpen)
   }
 }
}
</script>

• 数据drawerOpen存储了Vuetify的v-navigation-drawer是否打开。
• open 的监视允许您在 open 属性更改时更改抽屉状态（父子通信）
• @input 处理程序允许您将新抽屉状态发送到父组件（子到父通信）

对左右导航抽屉组件进行更改后，您的BaseLayout.vue 将需要监听drawerOpened 事件。

// BaseLayout.vue
<template>
  <div>
    <v-app-bar app>
      <v-btn
        icon
        @click.stop="openLeftNavigationDrawer=!openLeftNavigationDrawer">
        <v-icon>mdi-map-clock-outline</v-icon>
      </v-btn>

      <v-spacer></v-spacer>

      <v-btn
        icon
        @click.stop="openRightNavigationDrawer=!openRightNavigationDrawer">
        <v-icon>mdi-filter</v-icon>
      </v-btn>
    </v-app-bar>

    <left-navigation-drawer
      :open="openLeftNavigationDrawer"
      @drawer-opened="handleDrawerChange("left", $event)"   // Add these event handlers
    >
    </left-navigation-drawer>

    <right-navigation-drawer
      :open="openRightNavigationDrawer"
      @drawer-opened="handleDrawerChange("right", $event)"
    >
    </right-navigation-drawer>

    <v-content style="padding:unset!important;">
      <slot></slot>
    </v-content>
  </div>
</template>

<script>
import LeftNavigationDrawer from '../elements/LeftNavigationDrawer'
import RightNavigationDrawer from '../elements/RightNavigationDrawer'

export default {
  name: 'BaseLayout',
  components: {
    LeftNavigationDrawer,
    RightNavigationDrawer
  },
  data: function () {
    return {
      openLeftNavigationDrawer: false,
      openRightNavigationDrawer: false
    }
  },
  methods:{
    handleDrawerChange(type, isOpen){
       if(type === "left"){
          this.openLeftNavigationDrawer = isOpen
       }else{
          this.openRightNavigationDrawer = isOpen
       }
    }

  }
}
</script>

• 在您的 HTML 中，您侦听 drawer-opened 事件。
• 在事件处理程序中，您传递 2 个参数：一个是抽屉是左还是右。另一个参数是从组件接收到的值。
• 根据抽屉是左还是右，更改BaseLayout.vue中相应数据的值