Select with new-value in a loop

[blakeyuk]

Hi all,
I’ve got a page with a series of selects in a loop, each of which I am using the new-value property to allow new entries to be created.

I can get the form working, and the data is submitted, however, I need to get the index of the select from it’s parent loop, when the ‘add-new’ event function is called:

<q-form @submit="onSubmit" class="q-gutter-md">
      <div v-if="questions.length">
        <div v-for="(question, index) in questions" :key="question.id" class="row">
          <div class="col">{{ question.text }} ({{ index }})</div>
          <div class="col">
            <q-select v-model="model.questions[question.id]" :options="question.answers" use-input use-chips multiple label="" option-value="id" option-label="text" new-value-mode="add-unique" @new-value="createValue" />
          </div>
          <div class="col">
          </div>
        </div>
        <div>
          <q-btn label="Submit" type="submit" color="primary" />
        </div>
      </div>
      <div v-if="!questions.length">No questions found</div>
    </q-form>

createValue(val, done) {

      ///////////////// HOW DO I GET THE SELECT INDEX HERE ?????
      done(val)
    },

I tried just passing $event in the event @new-value=“createValue($event)” , but bizarrely that only passed the new value, not the normal event object.

Any help would be MUCH appreciated!

Regards,
Andy

[blakeyuk]

Ah, got it sorted thanks to this: https://forum.quasar-framework.org/topic/6135/passing-more-information-and-or-event-from-q-select-on-change-input/9

Final solution:

<q-form @submit="onSubmit" class="q-gutter-md">
      <div v-if="questions.length">
        <div v-for="question in questions" :key="question.id" class="row">
          <div class="col">{{ question.text }}</div>
          <div class="col">
            <q-select v-model="model.questions[question.id]" :options="question.answers" use-input use-chips multiple label="" option-value="id" option-label="text" @add="add" @new-value="(value, done) => { createValue(value, done, question.id) }" />

          </div>
          <div class="col">
          </div>
        </div>
        <div>
          <q-btn label="Submit" type="submit" color="primary" />
        </div>
      </div>
      <div v-if="!questions.length">No questions found</div>
    </q-form>

and

    createValue(val, done, questionId) {
        console.log("questionId", questionId)
        done(val)
    },