No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. blakeyuk
    B
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 7
    • Best 1
    • Groups 0

    blakeyuk

    @blakeyuk

    1
    Reputation
    1
    Profile views
    7
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    blakeyuk Follow

    Best posts made by blakeyuk

    • RE: Select with new-value in a loop

      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)
          },
      
      posted in Help
      B
      blakeyuk

    Latest posts made by blakeyuk

    • RE: How to use vuex store without access to vue instance?

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

      posted in Framework
      B
      blakeyuk
    • RE: Select with new-value in a loop

      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)
          },
      
      posted in Help
      B
      blakeyuk
    • Select with new-value in a loop

      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

      posted in Help
      B
      blakeyuk
    • q-editor toolbar size?

      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

      posted in Help
      B
      blakeyuk
    • RE: qTable with custom actions passed from parent?

      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>
      posted in Help
      B
      blakeyuk
    • RE: qTable with custom actions passed from parent?

      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>

      posted in Help
      B
      blakeyuk
    • qTable with custom actions passed from parent?

      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

      posted in Help
      B
      blakeyuk