Q-Fab and Q-Dialog conflict?



  • I’m having a problem with Q-Fab and Q-Dialog.
    When I closed the dialog box, Q-Fab doesn’t display its menu.
    It’s a conflict or I did it wrong? Thank you!

    <q-dialog v-model="fixed">
                <q-card>
                  <q-card-section>
                    <div class="text-h6">Terms of Agreement</div>
                  </q-card-section>
                  <q-separator />
                  <q-card-section style="max-height: 50vh" class="scroll">
                    <p v-for="n in 15" :key="n">Lorem ipsum dolor sit \</p>
                  </q-card-section>
                  <q-separator />
                  <q-card-actions align="right">
                    <q-btn flat label="Decline"  color="primary" />
                    <q-btn flat label="Accept" color="primary" />
                  </q-card-actions>
                </q-card>
    </q-dialog>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
                <q-fab
                  v-model="fab"
                  external-label
                  label-position ="left"
                  vertical-actions-align="left"
                  color="blue-grey-10"
                  icon="eva-plus-outline"
                  direction="left"
                >
                  <q-fab-action class="bg-grey-1 text-subtitle1 text-grey-8 shadow-5" label-position 
      ="left" @click="onClick; fixed = true" label="New Customer" />
                  <q-fab-action class="bg-grey-1 text-subtitle1 text-grey-8 shadow-5" label-position ="left" @click="onClick" label="New Order" />
                  <q-fab-action class="bg-grey-1 text-subtitle1 text-grey-8 shadow-5" label-position ="left" @click="onClick" label="New Menu" />
                </q-fab>
    </q-page-sticky>
    
    <script>
    export default {
      data () {
         fixed: false
    }}**
    * bolded text**
    


  • A simple thing: u haven’t returned the data in export. check the below code:

    <template>
    <q-page class=“flex flex-center”>
    <q-dialog v-model=“fixed”>
    <q-card>
    <q-card-section>
    <div class=“text-h6”>Terms of Agreement</div>
    </q-card-section>
    <q-separator />
    <q-card-section style=“max-height: 50vh” class=“scroll”>
    <p v-for=“n in 15” :key=“n”>Lorem ipsum dolor sit </p>
    </q-card-section>
    <q-separator />
    <q-card-actions align=“right”>
    <q-btn flat label=“Decline” color=“primary” />
    <q-btn flat label=“Accept” color=“primary” />
    </q-card-actions>
    </q-card>
    </q-dialog>
    <q-page-sticky position=“bottom-right” :offset="[18, 18]">
    <q-fab
    v-model=“fab”
    external-label
    label-position =“left”
    vertical-actions-align=“left”
    color=“blue-grey-10”
    icon=“add”
    direction=“left”
    >
    <q-fab-action class=“bg-grey-1 text-subtitle1 text-grey-8 shadow-5” label-position =“left” @click=“onClick; fixed = true” label=“New Customer” />
    <q-fab-action class=“bg-grey-1 text-subtitle1 text-grey-8 shadow-5” label-position =“left” @click=“onClick” label=“New Order” />
    <q-fab-action class=“bg-grey-1 text-subtitle1 text-grey-8 shadow-5” label-position =“left” @click=“onClick” label=“New Menu” />
    </q-fab>
    </q-page-sticky>
    </q-page>
    </template>

    <script>
    export default {
    name: ‘PageIndex’,
    data () {
    return {
    fixed: false,
    fab: true
    }
    },
    methods: {
    onClick () {
    // console.log(‘Clicked on a fab action’)
    }
    }
    }
    </script>



  • it works, thank you very much!


Log in to reply