我正在试用HeadlessUI，Tailwind 2和VueJS v3。为什么在出现开关组件之前，我必须单击HeadlessUI SwitchLabel？

Question

我正在试用HeadlessUI v1.0、Tailwinv2.2和VueJS v3 (我知道这一点)。但是为什么我必须在开关组件出现之前点击SwitchLabel呢？

一旦开关出现，这两种状态都会出现/正常工作。

我遗漏了什么开关组件吗？

线索:在第一次运行时，我看到(Headless-UI)开关组件(从HTML按钮创建)还没有包含任何类。

从Chrome Dev切换组件(在第一次运行时)：

<div class="flex justify-between items-center max-w-sm mx-auto">
    <label id="headlessui-label-1" class="mr-4">Enable notifications</label>
    <button class="" modelvalue="false" id="headlessui-switch-2" role="switch" tabindex="0" type="button" >
        <span class="translate-x-1 inline-block w-4 h-4 transition-transform transform bg-white rounded-full"></span>
    </button>
</div>

App.vue

  <img class="mx-auto" width="100" height="100" alt="Vue logo" src="./assets/logo.png" />

  <HelloWorld msg="HELLO V3 WORLD!" />

  <div class="mt-5 p-5">
    <EnableNotifications />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import EnableNotifications from './components/EnableNotifications.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
    EnableNotifications,
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

EnableNotifications.vue

<template>
  <SwitchGroup>
    <div class="flex justify-between items-center max-w-sm mx-auto">
      <SwitchLabel class="mr-4">Enable notifications</SwitchLabel>
      <Switch
        v-model="enabled"
        :class='enabled ? "bg-blue-600" : "bg-gray-200"'
        class="relative inline-flex items-center h-6 transition-colors rounded-full w-11 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        <span
          :class='enabled ? "translate-x-6" : "translate-x-1"'
          class="inline-block w-4 h-4 transition-transform transform bg-white rounded-full"
        />
      </Switch>
    </div>
  </SwitchGroup>
</template>

<script>
  import { ref } from 'vue'
  import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'

  export default {
    components: { Switch, SwitchGroup, SwitchLabel },

    setup() {
      const enabled = ref(false)

      return { enabled }
    },
  }
</script>```

Answer 1

刚刚修好了！将HeadlessUI升级到v1.3版本。(我使用的是v1.2)