Vue.js v-model指令无法更新Konsta UI Toggle组件状态

Konsta UI的kToggle组件没有遵循Vue默认的v-model约定（默认绑定value属性和input事件），它使用checked作为状态属性，触发的是change事件，因此直接使用v-model="checked"无法正常同步状态。

要让v-model生效，需要显式指定v-model绑定的属性为checked，使用Vue的v-model参数语法：

<k-toggle v-model:checked="checked" />

修改后的完整代码示例：

<script setup lang="ts">
import { kPage, kBlock, kToggle } from 'konsta/vue';
import { ref } from 'vue';

const checked = ref(false);
</script>

<template>
  <k-page>
    <k-block class="space-y-4">
      <p>:checked: {{ checked }}</p>
      <k-toggle :checked="checked" @change="() => checked = !checked" />
    </k-block>

    <k-block class="space-y-4">
      <p>v-model: {{ checked }}</p>
      <!-- 显式指定绑定checked属性 -->
      <k-toggle v-model:checked="checked" />
    </k-block>

    <k-block class="space-y-4">
      <p>checkbox: {{ checked }}</p>
      <input type="checkbox" v-model="checked" />
    </k-block>
  </k-page>
</template>

修改后，v-model就能正确同步checked的状态，和原生checkbox的行为保持一致。

内容的提问来源于stack exchange，提问作者Polymath