使用VueJS更改组件边距

Question

我有一个非常基本的VueJS侧边栏组件。我也在使用TailwindCSS。

我有一个带按钮的导航组件。单击该按钮会发出一个名为“toggle”的事件，触发侧边栏上的“切换”方法。

我的侧边栏在移动设备上关闭，并使用TailwindCSS响应式实用程序在桌面上打开。

在我的侧边栏组件中，我希望能够根据当前状态打开/关闭（设置margin / flex-grow / shrink）侧边栏。我可以使用VueJS和绑定类来设置这些属性，但它永远不会对两者都有效，因为一个是默认打开而另一个是关闭的 - 我怎么知道设置边距还是删除它？

以下是我的基本组成部分。请原谅格式化我无法正确格式化最后一个大括号。

<template>
<div class="w-76 -ml-76 lg:ml-auto lg:flex-grow lg:max-w-xs bg-red">
    <slot></slot>
</div>

export default {
data() {
    return {
        toggled: false
    }
},

methods: {
    toggle() {
        // 
    }
},

mounted() {
    this.$parent.$on('toggle', this.toggle)
}
}

我怎样才能做到这一点？