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

我正在使用Vuetify创建我的水疗中心。在为我的应用程序使用底部表单组件时，我无意中发现了一种情况，即当底部表单被隐藏时，我希望触发一个事件。 当底部被另一个更好的方法隐藏时，如何触发事件

我使用vue

监视的方法：

<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");
            }
        }
    }
})


新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
表：假，
}
},
观察：{
表：函数（）{
如果（this.sheet==false）{
警报（“底页关闭”）；
}
}
}
})
如果您看到了源代码，那么您的方法是正确的。它扩展了v-dialog中的事件，您可以使用
@input
、
@keydown
或
@click:outside

@input
可以为您工作，但仅在处于活动状态时触发：

<v-bottom-sheet v-model="sheet" @input="onInput">
   <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");
            }
        }
    },

    methods:{
      onInput(val){
        console.log('v-model change to', val)
      }
    }
})


新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
表：假，
}
},
观察：{
表：函数（）{
如果（this.sheet==false）{
警报（“底页关闭”）；
}
}
},
方法：{
onInput（val）{
console.log（'v-model更改为'，val）
}
}
})

如果您想同时检查激活和停用，则只能使用
监视

试试看


newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
表：假，
}
},
计算：{
计算得出：{
得到（）{
如果（this.sheet==false）{
警报（“底页关闭”）；
}
把这张表还给我
},
设置（值）{
this.sheet=值
}
}
}
})
From Review:Hi，请不要只回答源代码。试着提供一个关于你的解决方案如何工作的很好的描述。请参阅：。谢谢