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

Excellent! Two years later, and still useful. Thanks @tof06

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

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

Hi all,
I’ve just set up the editor for the first time, and on a PC, the standard toolbar is a bit small. Does anyone know a method to change the size, that then affects all buttons (text, icon, and both) in the editor?

Thanks in advance for your help,
And

Thanks @metalsadman

I didn’t quite end up doing it the way you said as I still couldn’t get the template to render (my bad, I’m assuming). But in trying to understand what your code does, I got there another way.

For anyone reading this, the generate table is defined as follows:

<template>
<q-card>
<q-card-section>
<div class=“text-h6 text-grey-8 q-gutter-sm”>
{{ tabletitle }}
<q-btn color=“primary” label=“Create” class=“float-right text-capitalize shadow-3” icon=“add” :to=“createPath” />
</div>
</q-card-section>
<q-card-section class=“q-pa-none”>
<q-table :data=“data” :columns=“columns” :no-data-label=“noDataLabel” :no-results-label=“noResultsLabel”>

  <template slot="body-cell-Action" slot-scope="row" >
        <slot name="actions" :item="row"></slot>
  </template>

  <template v-slot:no-data="{ icon, message, filter }">
    <div class="full-width row flex-center text-negative text-h6 q-gutter-sm">
      <span>
        {{ message }}
      </span>
    </div>
  </template>

</q-table>

</q-card-section>
</q-card>
</template>

And the parent table calls it as follows:

<custom-table
class=“q-mt-lg”
tabletitle=“Tags”
v-bind:data=“tags”
v-bind:columns=“columns”
no-data-label=“Please create your first tag”
no-results-label=“No tags found”
create-path="/tags/create"
>

    <template slot="actions" slot-scope="data">
        <q-td class="q-pa-md q-gutter-sm">
            <q-btn :to="'/tags/' + data.item.row.id + '/edit'" round color="primary" icon="edit" />
            <q-btn round color="secondary" icon="visibility" :to="'/tags/' + data.item.row.id"/>
            <q-btn round color="info" icon="archive" :to="'/tags/' + data.item.row.id"/>
            <q-btn round color="info" icon="unarchive" :to="'/tags/' + data.item.row.id"/>
            <q-btn round color="primary" icon="edit" class="float-right" :to="'/tags/' + data.item.row.id + '/edit'"/>
        </q-td>
    </template>
</custom-table>

My table template is as follows, and it shows BUTTONS GO HERE in the right place. But i can’t work out how to get the template from the parent component.

<template>
<q-card>
<q-card-section>
<div class=“text-h6 text-grey-8 q-gutter-sm”>
{{ tabletitle }}
<q-btn color=“primary” label=“Create” class=“float-right text-capitalize shadow-3” icon=“add” :to=“createPath” />
</div>
</q-card-section>
<q-card-section class=“q-pa-none”>
<q-table :data=“data” :columns=“columns” :no-data-label=“noDataLabel” :no-results-label=“noResultsLabel”>

  <template v-slot:body-cell-Action="props">
    <q-td :props="props">
        <q-item style="max-width: 420px">
            <q-item-section>
                BUTTONS GO HERE
            </q-item-section>
        </q-item>
    </q-td>
  </template>


  <template v-slot:no-data="{ icon, message, filter }">
    <div class="full-width row flex-center text-negative text-h6 q-gutter-sm">
      <span>
        {{ message }}
      </span>
    </div>
  </template>

</q-table>

</q-card-section>
</q-card>
</template>

Hi all,

I’ve got a custom table component created, that simply wraps a qTable in a qCard, adds some classes etc. The column definition and data is passed in via the parent page, and all is working well.

I now want to replicate that table, but passing in a template for the row “action” buttons, as the actions will vary each time I re-use this tabla, edepending on the data objects being viewed.

Is there any way to pass a template for the cell into the columns definition? I couldn’t see it anywhere in the docs.

The thing I’m thinking of is something like this: https://github.com/njleonzhang/vue-data-tables/blob/master/docs/en-us/actionCol.md

I should add that I’m new to Vue (have used react, angular, etc), so I’m guessing it’s something to do with slots, but I can’t get the thing to work.

Regards,
Andy