Dropdown button in repeating block



  • Hello. I am trying to show a dropdown button as part of repeating section in a card. This would have an associated add row button.
    When I select add ‘dataQuery’ from my dropdown, only the outline of the card and the plus button is shown.

    1. I would like to show the dropdown button with its option.
    2. I would also like to disable or at least have no action on that option once it has been selected in the future. This is to avoid duplicates. (Minor for now)

    I believe I am having issues with the way I created the dataQueries model as well as the following in the card:

    <div v-for="(dataQuery, index) in dataQueries" :key="dataQuery.id"> 
    

    Can you please point me where I am going wrong here? How can this be fixed? Any hints would be great.

    Below is my code:

    <q-tab-pane name="tasks">
              <q-card class="bg-cyan-2 q-ma-xl">
                <q-card-title>
                  <q-btn-dropdown label="Add a task" class="q-ma-md">
                    <q-list link>
                      <q-item @click.native="selectedForm">
                        <q-item-main>
                          <q-item-tile label>Form</q-item-tile>
                        </q-item-main>
                      </q-item>
                      <q-item @click.native='selectedDataQuery'>
                        <q-item-main>
                          <q-item-tile label>Data query</q-item-tile>
                        </q-item-main>
                      </q-item>
                    </q-list>
                  </q-btn-dropdown>
                </q-card-title>
              </q-card>
                <!-- Data Query part --> 
                          </q-card> 
                            <q-card class="bg-cyan-2 q-ma-xl" v-show="showDataQuery"> 
                              <div v-for="(dataQuery, index) in dataQueries" :key="dataQuery.id"> 
                              <q-card-title style="width: 300px; max-width: 90vw;"> 
                              SELECT A TYPE OF DATA 
      <q-select 
                                 color="secondary" 
                                 v-model="selectDataTypeForQuery" 
                                 v-model="dataQueries.selectDataTypeForQuery" 
                                  @input="selectedDataType" 
                                  :options="selectOptionsDataTypeForQuery" 
                                  :options="dataQueries.selectOptionsDataTypeForQuery" 
                                /> 
                              </q-card-title> 
                              <q-card-main> 
                                <q-btn class="float-right" round size="sm" color="primary" icon="add" @click="addRowDataQuery(index)" /> 
                              </q-card-main> 
                            </q-card> 
                            </div> 
                          </q-card> 
                          <!-- Form part --> 
                          <q-card class="bg-cyan-2 q-ma-xl" v-show="showForm"> 
                              <q-card-title style="width: 300px; max-width: 90vw;"> FORM </q-card-title> 
                          </q-card> 
            </q-tab-pane>
    
    export default {
    data () {
        return {
          showDataQuery: false, 
          showForm: false, 
          dataQueries: [ 
            { 
              selectDataTypeForQuery: [], 
              selectOptionsDataTypeForQuery: [ 
                { label: 'Steps', value: 'valSteps', color: 'black' }, 
                { label: 'Weight', value: 'valWeight', color: 'secondary' } 
              ] 
            } 
          ]
    }
    
    methods: {
        selectedDataQuery () { 
          this.$q.notify('selectedData Query') 
          this.showDataQuery = true 
        }, 
        selectedForm () { 
          this.$q.notify('selectedData Form') 
          this.showForm = true 
        }, 
        selectedDataType (value) { 
          this.$q.notify('selectedDataType: ' + value) 
        }, 
        addRowDataQuery (index) { 
          this.dataQueries.push({ 
            selectDataTypeForQuery: [], 
            selectOptionsDataTypeForQuery: [ 
            ] 
          }) 
        } 
      } 
    }
    


  • For interested parties, I’ve implemented the following solution:

    <div v-for="(dataQuery, index) in dataQueries" :key=dataQuery.id> 
                    <q-btn class="q-mb-md float-right" round size="sm" color="amber" icon="add" @click="addDT(index)" /> 
                  <q-select 
                      style="width: 300px; max-width: 90vw;" 
                      color="secondary" 
                      v-model="dataQuery.selectDataTypeForQuery" 
                      @input="selectedDataType" 
                      :options="dataQuery.selectOptionsDataTypeForQuery" 
    
    dataQueries: [ 
           { 
             selectDataTypeForQuery: {}, 
             selectOptionsDataTypeForQuery: [ 
               { label: 'Steps', value: 'valSteps', color: 'black' }, 
               { label: 'Weight', value: 'valWeight', color: 'secondary' } 
             ] 
           } 
         ],
    
        addDT (index) { 
          this.dataQueries.push({ 
            selectDataTypeForQuery: {}, 
            selectOptionsDataTypeForQuery: [ 
              { label: 'Steps', value: 'valSteps', color: 'black' }, 
              { label: 'Weight', value: 'valWeight', color: 'secondary' } 
            ] 
          }) 
        },