Question

我有一个vuetify导航抽屉，里面有一个v-expansion-panel。现在，我可以打开v-expansion-panel中的一个面板，但是如何设置它，以便在我关闭导航抽屉时，扩展面板也应该关闭。现在即使抽屉关闭它们仍保持打开状态吗？

以下是示例pen

这是演示：-

new Vue({
  el: "#app",
  data() {
    return {
      drawer: null,
      panel: true
    };
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout justfy-center>
        <v-flex>
          <v-btn @click.stop="drawer = !drawer">Toggle</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
    <v-navigation-drawer v-model="drawer" temporary right absolute>
      <v-expansion-panel v-model="panel" popout>
        <v-expansion-panel-content v-for="(item,i) in 5" :key="i">
          <template v-slot:header>
            <div>Item</div>
          </template>
          <v-card>
            <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-navigation-drawer>
  </v-app>
</div>

Answer 1

您可以添加一个观察者，该观察者将在panel更改状态时将false设置为drawer。例如：

watch: {
  drawer: function(){
    this.panel = false
 }
}

Answer 2

正如documentation所说，value属性（与笔中的v-model="panel"绑定）“控制扩展面板中内容的打开/关闭状态。对应于当前打开的内容的从零开始的索引。如果使用multiple道具（以前是1.5.x中的expand），则它是一个数字数组，其中每个条目都对应于打开的索引内容。索引顺序不相关。“

因此，当导航抽屉的value更改为false时，您只需要更新扩展面板的value就不会将其设置为活动状态。一种方法是与观察者

  watch: {
    drawer(newValue) {
      if (!newValue) {
        this.panel = -1;
      }
    }
  }

如何以编程方式关闭Vuetify扩展面板？

2 个答案: