Vuetify: навигационная панель: сообщить об изменениях v-модели в родительскую компанию.

Question

Я создал компонент Sidebar , используя навигационный ящик Vuetify. Код выглядит примерно так:

<template>
  <v-navigation-drawer persistent clipped v-model="isVisible" fixed app>
    <!-- content of the sidebar goes here -->
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'Sidebar',
  props: {
    visible: Boolean,
  },
  data() {
    return {
      isVisible: this.visible,
    };
  },
}
</script>

Обратите внимание, что я дублирую видимый реквизит с данными isVisible . Я пытался использовать опору непосредственно в v-модели , но каждый раз, когда боковая панель закрывалась, я получал предупреждение в консоли об изменении реквизита напрямую, так как они будут перезаписаны, когда родительский рендеринг.

В родительском представлении у меня есть кнопка на панели инструментов, которая должна менять значок в зависимости от видимости панели инструментов.

<template>
  <v-container fluid>
    <sidebar :visible="sidebarVisible"/>
    <v-toolbar app :clipped-left="true">
      <v-btn icon @click.stop="sidebarVisible = !sidebarVisible">
        <v-icon v-html="sidebarVisible ? 'chevron_right' : 'chevron_left'"/>
      </v-btn>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
    <v-footer :fixed="fixed" app>
      <span>&copy; 2017</span>
    </v-footer>
  </v-container>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue';

export default {
  name: 'MainView',
  data() {
    return {
      sidebarVisible: false,
      fixed: false,
      title: 'Title',
    };
  },
  components: {
    Sidebar,
  },
};
</script>

У меня проблема в том, что если закрыть боковую панель, щелкнув за ее пределами, значок кнопки на панели инструментов не изменится на chevron-left . Более того, чтобы вернуть боковую панель, мне нужно дважды нажать на кнопку.

Очевидно, это потому, что данные sidebarVisible в главном окне не обновляются при закрытии боковой панели. Как убедиться, что sidebarVisible обновляется при закрытии боковой панели?

Answer 1

Исправлена ​​ошибка Vuetify навигационной панели:

1. Сброс настроек окна вашего браузера по умолчанию 100%
2. Вот код,

Шаблон:

<nav>
     <v-toolbar flat app>
        <v-toolbar-side-icon class="grey--text" @click="toggle"></v-toolbar-side-icon>

        <v-toolbar-title class="text-uppercase grey--text">
          <span class="font-weight-light">Repo</span>
          <span>hub</span>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn flat color="grey">
          <span>Sign Out</span>
          <v-icon right>exit_to_app</v-icon>
        </v-btn>
      </v-toolbar>

      <v-navigation-drawer app v-model="drawer" class="indigo">
        <p>test</p>
      </v-navigation-drawer>
</nav>

Сценарий:

export default {
  data() {
    return {
      drawer: false
    };
  },
  methods:{
    toggle(){
        this.drawer = !this.drawer;
    }
  }
};

Answer 2

Я использую следующую конструкцию ...

в моем компоненте

<template>
  <v-navigation-drawer v-model="localDrawer"></v-navigation-drawer>
</template>
...
<script>
  export default {
    props: { value: { type: Boolean } },
    data: () => ({
     localDrawer: this.value
    }),
    watch: {
     value: function() {
       this.localDrawer = this.value
     },
     localDrawer: function() {
       this.$emit('input', this.localDrawer)
     }
    }
  }
</script>

в родительском слое

<app-drawer v-model="drawer"></app-drawer>

это работа для меня