Laravel + Quasar @click to show modal not working



  • I’m trying to use Quasar with Laravel for the first time and I am trying to show a modal with a button in another vue component, but somehow the value won’t turn to true which triggers my modal to show. Any help is appreciated. Thanks!

    Home.vue:

    <template>
    <div>
       <q-layout>     
        <q-list highlight class="bg-white">
            <q-list-header>Details 
                <q-btn color="green-5" @click="openAdd">Add New</q-btn>
            </q-list-header>
        </q-list>
        </q-layout>   
            <Add></Add> 
    </div>
    </template>
    
    <script>
    let Add =  require('./Add.vue');
       import {
           QLayout,
           QBtn,
           QList,
           QListHeader,
       } from 'quasar-framework'
    
       export default {
           name: 'app',
           components: {
               QLayout,
               QBtn,
               QList,
               QListHeader, 
               Add
           },
           data()  {
               return {
                   layoutStore: {
                       view: 'lHh Lpr lFf',
                       reveal: false,
                       leftScroll: true,
                       rightScroll: true,
                       leftBreakpoint: 996,
                       rightBreakpoint: 1200,
                       hideTabs: false,
                       addActive : ''
                   }
               }
           },
           data(){
               return{
                   addActive : ''
               }
           },
           methods: {
               openAdd() {
                   this.addActive = 'true'
               }
           }
      }
    </script>
    <style lang="stylus">
    </style>
    

    Add.vue (Modal):

    <template>
        <div>
            <q-modal v-model="addActive" ref="layoutModal" :content-css="{minWidth: '50vw', minHeight: '50vh'}">
                <q-modal-layout>
                    <q-toolbar slot="header" color="green-7">
                        <div class="q-toolbar-title">
                            Header
                        </div>
                    </q-toolbar>
    
                    <q-toolbar slot="footer" color="green-7">
                        <div class="q-toolbar-title">
                            Footer
                        </div>
                        <q-btn color="green-10"  label="Save">Save</q-btn>
                        <q-btn color="red-9" @click="open = false" label="Close">Cancel</q-btn>
                    </q-toolbar>
                </q-modal-layout>
            </q-modal>
        </div>
    </template>
    
    <script>
    
       import {
           QToolbar,
           QToolbarTitle,
           QBtn,
           QModal,
           QModalLayout
    
       } from 'quasar-framework'
    
       export default {
            name: 'app',
            components: {
                QToolbar,
                QToolbarTitle,
                QBtn,
                QModal,
                QModalLayout
    
            },
            data()  {
                return {
                    layoutStore: {
                        view: 'lHh Lpr lFf',
                        reveal: false,
                        leftScroll: true,
                        rightScroll: true,
                        leftBreakpoint: 996,
                        rightBreakpoint: 1200,
                        hideTabs: false
                    }
                }
            },
            data () {
                return {
                    addActive: false 
                }
            }    
        }
    </script>
    
    <style lang="stylus">
    
    </style>
    


  • Both Add.vue as well as Home.vue has a property addActive.

    Just because you set addActive = 'true' ( btw that should be addActive = true no ? ) on the parent component that does not mean the child component property addActive will be true.

    Passing data down to child component is by props.
    https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

    Hope that helps. I would rather learn vue without Laravel.


Log in to reply