🐛 [Bug]: [Checkbox]组件的checked属性在非group中不生效

[AcWrong02]

Version

latest

Vue Version

3

Link to minimal reproduction

<template>
    <tiny-checkbox label="复选框1" name="name2" :checked="true"></tiny-checkbox>
</template>

<script>
import { Checkbox, CheckboxGroup } from '@opentiny/vue'

export default {
  components: {
    TinyCheckbox: Checkbox,
    TinyCheckboxGroup: CheckboxGroup
  },
}
</script>

Step to reproduce

复制到Playground中，发现设置checked为true无效

What is expected

在某些场景下，我需要对单独的checkbox使用checked属性，期望它可以生效。

What is actually happening

单独的checkbox使用checked属性不生效

What is your project name

null

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: The checked attribute of the [Checkbox] component does not take effect in non-groups

[shenjunjian]

"单独的checkbox使用checked属性不生效"

单独使用的话， 建议用 v-model 绑定即可。 没必要使用checked属性。 需要讨论

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

"Using the checked attribute for a separate checkbox does not take effect"

If used alone, it is recommended to use v-model binding. There is no need to use the checked attribute. Need to discuss

[AcWrong02]

@shenjunjian 场景是这样子的：我的子组件中用到了父组件传递过来的属性isChecked（在某个对象上），我需要在它改变的时候给父组件发生某个事件，直接用v-model将该属性绑定到checkbox上，就违反了Vue的单向数据流（https://cn.vuejs.org/guide/components/props.html#mutating-object-array-props）。

//parent.vue
<template>
  <Children :oneObj="obj"/>
</template>
<script setup>
import {ref} from 'vue'
const objArray = [{
   ....
 isChecked: false,
}]
</script>

//children.vue
<template>
   <div v-for="item in oneObj">
       <tinyCheckbox v-model="item.isChecked" @change="handleChange"/>
   </div>
</template>
<script setup>
const props = defineProps({
    oneObj: Array
})
const handleChange = ()=>{
   // some code
}
</script>

在使用其他组件库的时候，我是用check属性来规避这个问题的

[vaebe]

也许可以这样, 把 v-model 展开

[shenjunjian]

我试了最新的代码， checked属性是可以正常使用了
“直接用v-model将该属性绑定到checkbox上，就违反了Vue的单向数据流”，这个场景报警告很常见，
v-model建议只绑定上下文的状态值，不建议绑定props值。

• 可以在组件内克隆一个变量用于绑定，
• 也可以将v-model拆开用， 通知父组件更新某个值，以符合vue的规范建议。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

I tried the latest code and the checked attribute can be used normally. I don't know what was changed.

"Directly using v-model to bind this property to the checkbox violates Vue's one-way data flow." Warnings are very common in this scenario.
v-model recommends only binding the state value of the context, and does not recommend binding props values.

• You can clone a variable within the component for binding,
• You can also disassemble v-model and notify the parent component to update a certain value to comply with Vue's specification recommendations.