Laravel + Quasar @click to show modal not working

[GeroKhai]

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>

[turigeza]

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.