Bug Type: Component
Environment
- Vue Version:
3.2.39 - Element Plus Version:
2.2.26 - Browser / OS:
Chrome 107.0.5304.107 - Build Tool:
esbuild
Reproduction
Related Component
el-checkbox
Reproduction Link
Link
Steps to reproduce
El-Checkbox model-value binding does not work in conjuction with original input type value attribute.
- Create el-checkbox component with boolean v-model
- Check <input class="el-checkbox__original"... > value attribute
What is Expected?
Original checkbox value should be the same as binding v-model
What is actually happening?
I presume because the checkbox component is wrapped in a label, the original input value is the parent's label value.
Additional comments
If I am wrong and do not understand the usage of the component, please let me know how to change the original checkbox's value.
8条答案
按热度按时间jaxagkaj1#
Can you share your code?
just add it to demo
vxbzzdmp2#
Can you share your code? just add it to demo
https://element-plus.run/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiwgb25Nb3VudGVkIH0gZnJvbSAndnVlJ1xuaW1wb3J0IHsgdmVyc2lvbiBhcyBFcFZlcnNpb24gfSBmcm9tICdlbGVtZW50LXBsdXMnXG5pbXBvcnQgeyBFbGVtZW50UGx1cyB9IGZyb20gJ0BlbGVtZW50LXBsdXMvaWNvbnMtdnVlJ1xuXG5jb25zdCBjaGVja2JveFZhbHVlID0gcmVmKGZhbHNlKTtcbmNvbnN0IGNoZWNrYm94UmVmID0gcmVmKG51bGwpO1xubGV0IG9yaWdpbmFsVmFsdWUgPSByZWYobnVsbCk7XG5cbm9uTW91bnRlZCgoKSA9PiB7XG4gIG9yaWdpbmFsVmFsdWUgPSBjaGVja2JveFJlZi52YWx1ZS4kZWwuY2hpbGRyZW5bMF0uY2hpbGROb2Rlc1swXS5fdmFsdWVcbn0pO1xuXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8ZWwtY2hlY2tib3ggcmVmPVwiY2hlY2tib3hSZWZcIiB2LW1vZGVsPVwiY2hlY2tib3hWYWx1ZVwiIGxhYmVsPVwiT3B0aW9uIDFcIiAvPiBcbiAgPGJyLz48YnIvPlxuXG4gIHt7IGNoZWNrYm94VmFsdWUgfX0gPGJyPjxicj5cbiAge3sgb3JpZ2luYWxWYWx1ZSB9fVxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydF9tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwiX28iOnt9fQ==
Here's the demo, please click on the checkbox to change it's value, to see the original input's value. I'm not used to writing TypeScript, so please bare that in mind. Thanks!
fnx2tebb3#
This should be boolean!
mi7gmzs64#
Got it, Here is different, you can use the value of
checkboxValueRef.El-checkbox is a Component includes input tag and label tag, so can get the value of this component using
model-value / v-model.more explanation and details
czq61nw15#
@itsalimanuel I know that, I've been working with Element UI and Element Plus now for a couple of years. The issue is, we use the "el-checkbox" component in conjuntion with Vue and Laravel. On the Login page (blade view from Laravel) we use the for "Remember me" checkbox and one has to only add the native "name=remember" attribute for it to work. It worked up until the Element Plus version 2.2.15 and I have just updated it to the latest and it does not work anymore. Either the "name" attribute or the "value" attribute changed somehow.
This works with the native HTML <input type="checkbox" name="remember" ...> and the correct boolean value is sent with the login request. Not with el-checkbox anymore.
llew8vvj6#
may this code help ?
csga3l587#
@itsalimanuel No, but thanks! I understand everything you did, you just have to know I do not want to add any script tags at the login page. The issue is el-checkbox component acts differently from the native checkbox, which is not great. I have no option of referencing the model value at the login page. :)
mwyxok5s8#
UPDATE: I fixed my issue by adding ":label" attribute the same value as my v-model/model-value and hidding it. When v-model changes, so does the label attribute in el-checkbox and also the corresponding original input's "value" attribute. I then hide the .el-checkbox__label with CSS.
Changing original input's "value" attribute with el-checkbox's "label" attribute is WRONG! The "value" in the original input should be the same as v-model/model-value not the "label".
This is an UGLY HACK and the EL-CHECKBOX component SHOULD BE FIXED/REFACTORED!!!