How to get values of checked multiple checkbox and also checked checkboxes dynamically from database. facing trouble to operate simultaneously

Question

vuejs: if i get values of checked box by v-model but not set checkbox checked dynaiclly from database. On other hand if i can set chechbox checked dynamically but not able to get values of checked checkbox.

With this i get value of checked checkbox but not set checked dynamically

<li v-for="swv  in appointment.switch_shift " >
   <input  type="checkbox" :value="swv.id" v-model="checkshifts"  
    @change="shiftSwitch()"   />
   <label  >  {{ swv.name}}</label>
</li>

----------------------------------------
data :  {1: {id: 1, name: "Morning", active: true}, 2: {id: 2, name: "Afternoon", active: false},…}

if set checkbox checked dynamically with the following code but not able get values of checked check box.

<li v-for="swv  in appointment.switch_shift " >
   <input  type="checkbox"  v-model="swv.active"  
    @change="shiftSwitch()"   />
   <label  >  {{ swv.name}}</label>
</li>

I expected that both operation should worked together. thanks

Alec · Accepted Answer · 2019-04-28 09:28:58Z

1

Firstly, updating database dynamically in such a way is not a very good idea, because it's an asynchronous operation and you can have a loads of concurrency issues with unpredictable results if someone checks/unchecks the checkbox several times before the previous update process is not finished. So you'd better have a special button to update the data an block the UI during update.

But if you insist on acting like this, the best way, I think, is to not set a model for a checked, but to bind it one way and on click toggle it directly in the model object. Something like this

<li v-for="swv  in appointment.switch_shift " >
   <input  type="checkbox"  :checked="swv.active"  
    @click.prevent = "shiftSwitch(swv)"   />
   <label  >  {{ swv.name}}</label>
</li>

and in component

...
methods:{
    shiftSwitch:function(swv){
        swv.active = !swv.active;
        ...
    }
},
...

edited Apr 28, 2019 at 9:28

Alec

9,7338 gold badges44 silver badges71 bronze badges

answered Apr 28, 2019 at 7:00

Дмитро Іванов

1,0316 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paljinder Dhillon · Accepted Answer · 2019-04-28 12:50:03Z

yes i resolved this trouble Firstly set checkbox checked dynaiclly from database see the code below.

HTML

      <li v-for="swv  in appointment.switch_shift " >
          <input class="js-small" type="checkbox"  v-model="swv.active"  
            @change="shiftSwitch()"   />
          <label  >  {{ swv.name}}</label>
        </li>


**Data**
appointment.switch_shift: {
1: {id: 1, name: "Morning", active: false}
2: {id: 2, name: "Afternoon", active: true}
3: {id: 3, name: "Evening", active: false}
} 

 see one thing when i checked any of checkbox of Morning , Afternoon, Evening then corresponds data row active become true like below
{id: 1, name: "Morning", active: true}

and when uncheck then {id: 1, name: "Morning", active: false}

use data of this.appointment.switch_shift to post for updation in database.

Method

shiftSwitch:function(id){
  axios.post(this.switchshiftroute , {'opd_id':this.opdid , 'shifts': this.appointment.switch_shift})
      .then( (response)=>{ 
        this.getAppointments();
          console.log(response.data);
      }).catch((error)=>{
        console.log(error);
      })

    }

Collectives™ on Stack Overflow

How to get values of checked multiple checkbox and also checked checkboxes dynamically from database. facing trouble to operate simultaneously

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related