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("Cheked");
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?
Edit
My idatos
is an axios which return the info from DB.
This is a field b-form-input type="text"
that work using the v-model inheriting the data
<b-row align-v="center">
<b-col cols="3">
<b>NAME:</b>
</b-col>
<b-col cols="9">
<b-form-input type="text" id="ALU_NAME" v-model="idatos['ALU_NAME']"></b-form-input>
</b-col>
</b-row>
The main problem is the v-model that works nice with b-form-input type="text" / type="date"
and b-form-select
is not working with a b-form-checkbox
and I don't know if is it problem or how I wrote it, or maybe the event is not correct in the <script>
.
CodePudding user response:
This code works well enough, no need to have any querySelectors or alike.
<template>
<div>
<p>isCheckboxChecked? {{ isCheckboxChecked }}</p>
<b-form-checkbox
id="nice-checkbox"
v-model="isCheckboxChecked"
value="yes"
unchecked-value="no"
>
</b-form-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
isCheckboxChecked: 'yes'
}
},
}
</script>
Use the provided API by Bootstrap-Vue: https://bootstrap-vue.org/docs/components/form-checkbox
PS: works with 'true'
or even true
for the value
prop too.
If you want your result to be dependent on some part coming from an API, here is an example with a true
available in completed
.
<template>
<div>
<p>isCheckboxChecked? {{ isCheckboxChecked }}</p>
<b-form-checkbox
id="nice-checkbox"
v-model="isCheckboxChecked"
value="true"
unchecked-value="false"
>
</b-form-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
isCheckboxChecked: true
}
},
async created () {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/4')
const result = await response.json()
this.isCheckboxChecked = result.completed
},
}
</script>
CodePudding user response:
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!