lundi 6 novembre 2023

Vue checkbox binding not working when using a complex dynamic model

I'm working with a dynamic form that is generated from the database with a bunch of questions, basically in the form of an array of questions, all fields work as intended, but my checkbox behave wrong, just selecting an item makes it all selected, but when I just use a brand new object, it works as expected, this is the json that builds the failing question (this is part of an array):

{
            "id": 11,
            "question": "Check all coverages that apply:",
            "options": "{\"values\": [\"Group Medical\", \"Dental\", \"Vision\", \"Voluntary Supplemental Life\", \"Voluntary Supplemental Life for Spouse/Dependents\", \"Short-Term Disability\", \"Long-Term Disability\", \"Health FSA\", \"HRA\", \"Wellness Program\", \"AFLAC\", \"MEC (Minimum Essential Coverage) Plan\", \"Dependent Care FSA\", \"HSA\", \"Tobacco Surcharge\"]}",
            "section_id": 10,
            "form_position": 1,
            "type": 1,
            "liability": 0,
            "weight": 0,
            "title": "For a more accurate assessment, please complete this form:",
            "subtitle": "",
            "is_main": 1,
            "section_type": 0
        }

And this is the code that is failing:

<div class="ms-2 ps-5 mb-3" v-for="(question, questionIndex) in initialQuestions[mainKey]" :key="question.id">
          <h5 class="question-title"></h5>
          <h1></h1>
          <div class="row">
            <div class="col-12">
              <div>
                <p>Papa: </p>
                <div v-if="question.type === 0" v-for="(option, optionIndex) in question.options" class="form-check">
                  <!-- render input -->
                </div>
                <div v-else-if="question.type === 1" v-for="(option, optionIndex) in question.options"  :key="option" class="form-check">
                  <input 
                    class="form-check-input" 
                    type="checkbox" 
                    :id="option" 
                    v-model="initialAnswers[question.id]"
                    :value="option">
                  <label class="form-check-label"
                    :for="option">
                    
                  </label>
                </div>
                <div v-else-if="question.type === 2">
                  <!-- render select -->
                </div>
                
              </div>  
            </div>
          </div>
        </div>

If I inspect the composed object that I use of the checkbox I get this, as you can see, answer 11 is an array as it should, but on raw values, it just shows 'true':

Object debug

Finally, if instead of using the dynamically generated model, I just bind a const checkedNames = ref([]) to the input model it works perfectly, what I'm missing?

enter image description here

In case is any of use, this is how I initialize my model, case 1 is for checkboxes

const initialAnswers = ref([])

for (const [key, value] of Object.entries(initialQuestions.value)) {
      console.log(`${key}: ${value}`);
      value.forEach((obj) => {
        switch(obj.type){
          case 0:
            initialAnswers[obj.id] = ref('')
            break;
          case 1:
            initialAnswers[obj.id] = ref([])
            break;
          case 2:
          case 3:
            initialAnswers[obj.id] = ref()
            break;
        }
        //initialAnswers[obj.id] =  obj,type === 0 ref([]) 
      })
    }



Aucun commentaire:

Enregistrer un commentaire