Dropdown button in repeating block

[Oxar]

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: [ 
        ] 
      }) 
    } 
  } 
}

[Oxar]

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