opentiny
🐛 [Bug]: [Checkbox]组件的checked属性在非group中不生效
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
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
"单独的checkbox使用checked属性不生效"
单独使用的话， 建议用 v-model 绑定即可。 没必要使用checked属性。 需要讨论
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
@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属性来规避这个问题的
我试了最新的代码， checked属性是可以正常使用了 “直接用v-model将该属性绑定到checkbox上，就违反了Vue的单向数据流”，这个场景报警告很常见， v-model建议只绑定上下文的状态值，不建议绑定props值。
- 可以在组件内克隆一个变量用于绑定，
- 也可以将v-model拆开用， 通知父组件更新某个值，以符合vue的规范建议。
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.