javascript - 底部工作表处于活动状态或隐藏状态时触发的事件 - Vuetify

Question

我正在使用 Vuetify 来创建我的 SPA。在为我的应用程序使用底表组件时，我偶然发现了一种情况，即我想在底表隐藏时触发一个事件。当使用另一种更好的方法隐藏底页时如何触发事件？

我使用 vue 的方法watch：

<v-bottom-sheet v-model="sheet">
          <v-sheet class="text-center" height="50vh" tile>

          </v-sheet>
        </v-bottom-sheet>



new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
        return {
            sheet: false,
        }
    },
    watch: {
        sheet: function () {
            if (this.sheet == false) {
               alert("Bottom sheet closed");
            }
        }
    }
})

标签： javascriptvue.jsvuejs2vuetify.js

Answer 1

试试看

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
        return {
            sheet: false,
        }
    },
    computed: {
        sheetComputed:{
          get(){
            if (this.sheet == false) {
               alert("Bottom sheet closed");
            }
            return this.sheet
          },
          set(value){
            this.sheet = value
          }
        }
    }
})

<v-bottom-sheet v-model="sheetComputed">
   <v-sheet class="text-center" height="50vh" tile>

   </v-sheet>
</v-bottom-sheet>