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

Question

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

错误:

vue.esm.js?efeb:628 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "open"

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 的值。只有 parent 才能做到这一点。由于 open 是一个 prop，并且 v-navigation-bar 正在尝试更改它，因此您会看到错误 Avoid mutating a prop... .

为了修复此问题，您可以在组件中定义发送到 v-navigation-drawer 的数据。像这样的事情:

// 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 中相应数据的值