Vue.js How to pass data to edit form-CodePudding

The checkbox in my form isn't showing the correct value in edit mode. My other input fields work but not the checkboxes. What am I missing in the getNetworkTeams method? I'm stuck, could anyone advise me? Thanks for any help!

data() {
        return {
          networkTeam: {
            name: "",
            isExclusion: true,             
          },
        };
  methods: {
    getNetworkTeams() {
      let url =`/s/teams/network-teams/${this.netId}`;
      axios.get(url, this.networkTeam, {
        headers: {
          Authorization: this.$store.state.user.auth.token,
        },
      })
      .then(response => {
          this.networkTeam = response.data;
       })
       .catch((error) => {
          console.log(error);
       });
     },
   },

<div >
      <label 
        for="isExclusion" 
        
      >
        <span >Is exclusion</span>
        <b-form-checkbox
          id="isExclusion"
          v-model="networkTeam.isExclusion"
          name="isExclusion"
          type="checkbox"             
        />
      </label>
</div>

CodePudding user response：

If I understood you correctly, you are getting numbers 1 or 0 from api call? Then convert it to boolean:

new Vue({
  el: '#demo',
  data() {
    return {
      networkTeam: {
        name: "",
        isExclusion: 1,             
      },
    };
  },
  methods: {
    getNetworkTeams() {
      //api call
      this.networkTeam.isExclusion === 1
      this.setAsBoolean(this.networkTeam.isExclusion)
    },
    setAsBoolean(num) {
      this.networkTeam.isExclusion = num > 0
    },
  },
  mounted() {
    this.getNetworkTeams()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
  <label 
    for="isExclusion" 
    
  >
    <span >Is exclusion</span>
    <b-form-checkbox
      id="isExclusion"
      v-model="networkTeam.isExclusion"
      name="isExclusion"
      type="checkbox"             
    />
  </label>
  {{networkTeam.isExclusion}}
</div>