Level 63
Where is the event ?
Oct 25, 2022
5
Level 1
How to auto-checked this b-form-checkbox? ( Bootstrap Vue )
I've a form that show all data from a DB to edit easily.
All data show and save perfectly in the b-form-input type="text" / type="date" and b-form-select, but not the b-form-checkbox.
The v-model worked perfectly with the first ones to inherit data, but no with b-form-checkbox: true (checked the b-form-checkbox) or false (unchecked the b-form-checkbox).
I read about the official doc and the official prop check doc, but didn't work, so maybe the problem is thing about the DOM or things I don't understand because Bootstrap VUE still being complicated for me to dominate.
This is the important part of my actual code, all in the same .vue:
template section
<b-form-checkbox
id="ALU_MarcaNO_CORRESPONDENCIA"
v-model="idatos['ALU_MarcaNO_CORRESPONDENCIA']"
value="true"
unchecked-value="false"
></b-form-checkbox>
script section
data() {
return {
MarcaNO_CORRESPONDENCIA: document.getElementById("ALU_MarcaNO_CORRESPONDENCIA"),
}
},
watch: {
idalumno(value) {
if(this.idatos['ALU_MarcaNO_CORRESPONDENCIA'] == true) {
console.log("Checked");
this.MarcaNO_CORRESPONDENCIA.checked = true;
} else {
console.log("Uncheked");
this.MarcaNO_CORRESPONDENCIA.checked = false;
}
}
},
The console.logs work perfectly, so the conditional read nice the DB data, but the event just don't check/uncheck the b-form-checkbox.
Where should I do this event? In the mounted() section? In some methods function()? I tried and nothing.
Any idea why this simple code don't work?
Level 1
@vincent15000 In the watch.
Sorry if I don't use the exactly vocabulary, with event I mean the js part where I check the b-form-checkbox
1 like
Level 1
Ok, I solved by myself the problem following my suspicions of the data sample order
The main problem is the data that the variable idatos['ALU_MarcaNO_CORRESPONDENCIA'] transform because the order of DOM, so we thought the var give back true or false, but in real it gives back 1 and 0, so I change the order of events like this:
template section
<b-form-checkbox
id="ALU_MarcaNO_CORRESPONDENCIA"
v-model="correspondenciaBoolean"
></b-form-checkbox>
script section
data() {
return {
correspondenciaBoolean: 'false',
}
},
methods: {
anyFunction: function (){
this.correspondenciaBoolean = this.idatos['ALU_MarcaNO_CORRESPONDENCIA'] === "1" ? 'true' : 'false';
}
},
And it's done!
1 like
Level 1
Ok, I solved by myself the problem following my suspicions of the data sample order
The main problem is the data that the variable idatos['ALU_MarcaNO_CORRESPONDENCIA'] transform because the order of DOM, so we thought the var give back true or false, but in real it gives back 1 and 0, so I change the order of events like this:
template section
<b-form-checkbox
id="ALU_MarcaNO_CORRESPONDENCIA"
v-model="correspondenciaBoolean"
></b-form-checkbox>
script section
data() {
return {
correspondenciaBoolean: 'false',
}
},
methods: {
anyFunction: function (){
this.correspondenciaBoolean = this.idatos['ALU_MarcaNO_CORRESPONDENCIA'] === "1" ? 'true' : 'false';
}
},
And it's done!
P.D. Here you cant delete my messages, StackOverShit, fuck you loser mods ;)
Level 63
@El conde Lucanor Is it really necessary to be vulgar ?
Please or to participate in this conversation.