Adding and opening right drawer with specific component or view



  • I wanted to show right drawer for just two views or within two components in the entire app on a button click and the content are coming from those components only (some dynamic content).
    Can I achieve something like this without adding right drawer slot in my main q-layout component?

    <template>
      <div class="layout-padding">
        <!-- code for quasar drawer which I couldn't figure out without q-layout! -->
      
        <q-btn flat v-for="item in myList" @click="openSuggestions(myList[item].suggestions)">
          {{item}} Suggestions
        <q-btn>
      </div>
    </template>
    
    <script>
    import { QBtn } from 'quasar'
    
    export default {
      components: {
        QBtn 
      },
      data () {
        return {
          myList: {
            name: { suggestions: ['related link 1', 'related link 2', 'related link 3'] }
            company: { suggestions: ['related link 4', 'related link 5'] }
          }
        } 
      },
      methods: {
        openSuggestions: function (list) {
          // Pass list to right drawer
          // Open right drawer
        }
      }
    } 
    </script>
    
    

    Thanks in advance for any suggestions. Above code is just a snippet I typed here from my component so may have some typo or syntax issues.