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

【问题标题】：How to close Vuetify Expansion Panel programatically?如何以编程方式关闭 Vuetify 扩展面板？
【发布时间】：2020-04-26 05:04:00
【问题描述】：

我有一个 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>

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

您可以添加一个观察者，当drawer 改变它的状态时，它将把panel 设置为false。例如：

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

【讨论】：

【解决方案2】：

正如documentation 所说，value 属性（与笔中的v-model="panel" 绑定）“控制扩展面板中内容的打开/关闭状态。对应于从零开始的索引“

因此，当导航抽屉的value 更改为false 时，您只需更新扩展面板的value 以将none 设置为活动。一种方法是使用观察者

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

【讨论】：