Using associative array in v-model

[dirkhd]

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

[s.molinari]

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