Как получить значения проверенных множественных флажков, а также динамически отмеченных флажков из базы данных.сталкиваясь с проблемой работать одновременно

Question

vuejs: если я получаю значения установленного флажка по v-модели, но не установлен флажок отмечен динамически из базы данных. С другой стороны, если я могу установить чекбокс проверен динамически, но не может получить значения флажок проверен.

При этом я получаю значение флажка, проверенного, но не установленного проверяется динамически

<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},…}

, если установлен флажок динамически отмечен с помощью следующего кода, но не может получить значения флажка установлен.

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

Я ожидал, что обе операции должны работать вместе. спасибо

Answer 1

Во-первых, динамическое обновление базы данных таким способом не очень хорошая идея, потому что это асинхронная операция, и вы можете столкнуться с множеством проблем параллелизма с непредсказуемыми результатами, если кто-то установит / уберет флажок несколько раз перед предыдущим процессом обновления. не закончен Так что вам лучше иметь специальную кнопку для обновления данных в блоке пользовательского интерфейса во время обновления.

Но если вы настаиваете на том, чтобы действовать таким образом, я думаю, что лучший способ - не устанавливать модель для проверяемого, а привязать ее одним способом и щелкнуть по ней, чтобы переключить ее непосредственно в объекте модели. Как то так

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

и в компоненте

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

Answer 2

да, я решил эту проблему. Сначала установите флажок dynaiclly из базы данных, см. Код ниже.

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}

и когда снимите флажок, {id: 1, имя: "Утро", активно: false}

использовать данные this.appointment.switch_shift для публикации для обновления в базе данных.

Метод

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);
      })

    }