How to auto-checked this b-form-checkbox?-CodePudding

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!