Using associative array in v-model



  • I am developing a simple survey module with Quasar. Definition of the survey is in data() and all answers I like to store in answer_object, for instance:

    data() {
        return {
          answer_object: [],
          survey: {
            surveyname: "Survey 1",
            generateNewSurveyID: true,
            questions: {
              q1: {
                type: "open",
                varname: "age",
                text: "How old are you?"
              },
              q2: {
                type: "single",
                varname: "gender",
                text: "Your gender?",
                options: {
                  opt: {
                    value: 1,
                    label: "male"
                  },
                  opt: {
                    value: 2,
                    label: "female"
                  }
                }
              }
          }
        }
      };
    }
    

    I like to store the answers in an associative array and take the “varname” as key:

    answer_object['age']
    

    So I tried to use this in the v-model but I can’t figure out how to do this - have tried quite a lot of approaches but I guess something here I do not understand:

    Just one approach as illustration that I have tried to demonstate what I wanna do:

    <q-card-section v-for="(quest,index) in survey.questions" :key="index">
        <div v-if="quest.type=='open'">
           <q-input v-model="answer_object[quest.varname]" type="text" :label="quest.text" />
        </div>
    </q-card-section>
    

    Best
    Dirk



  • There are a few caveats to Vue’s reactivity system, when handling arrays. One is, you can’t add array items via named keys.

    https://vuejs.org/v2/guide/list.html#Caveats

    Scott


Log in to reply