我正在尝试 HeadlessUI、Tailwind 2 和 VueJS v3。为什么我必须在 Switch 组件出现之前单击 HeadlessUI SwitchLabel？答案

【问题标题】：I'm trying out HeadlessUI, Tailwind 2, and VueJS v3. Why do I have to click on the HeadlessUI SwitchLabel, before the Switch component appears?我正在尝试 HeadlessUI、Tailwind 2 和 VueJS v3。为什么我必须在 Switch 组件出现之前单击 HeadlessUI SwitchLabel？
【发布时间】：2021-09-05 09:31:25
【问题描述】：

我正在试用 HeadlessUI v1.0、Tailwind v2.2 和 VueJS v3（我知道，这太先进了）。但是为什么我必须在 Switch 组件出现之前点击 SwitchLabel 呢？

一旦 Switch 出现，两种状态都会出现/正常运行。

我缺少关于 Switch 组件的某些内容吗？

提示：在第一次运行时，我看到 (Headless-UI) Switch 组件（从 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>```

【问题讨论】：

标签： vuejs3 tailwind-css headless headless-fragments

【解决方案1】：

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

【讨论】：