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

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

作为documentation说，value 属性(与笔中的 v-model="panel" 绑定(bind))“控制扩展面板中内容的打开/关闭状态。对应于当前打开内容的从零开始的索引。如果使用 multiple 属性(之前在 1.5.x 中为 expand)，则它是一个数字数组，其中每个条目对应于打开内容的索引。索引顺序无关。"

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

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