Laravel + Quasar @ нажмите, чтобы показать, что модал не работает

Question

Я пытаюсь использовать квазар в первый раз и пытаюсь показать модал с кнопкой, но каким-то образом значение не изменится на true, из-за чего мой модал будет отображаться.

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-search/> -->
        <q-item>
            <q-item-side>
                <q-item-tile avatar>
                    <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
                </q-item-tile>
            </q-item-side> 
            <q-item-main label="John Doe" />
            <q-item-side right>
            <div>
                <q-btn flat round icon="edit" color="yellow-8" small/>
                <q-btn flat round icon="delete" color="red-8" small/>
                <q-btn flat round icon="visibility" color="green-6" small/>
            </div>
              </q-item-side>
        </q-item>
    </q-list>
    </q-layout>   
        <Add></Add> 
</div>
</template>

Home.vue (скрипт)

<script>
    let Add =  require('./Add.vue');
    export default {
        name: 'app',
        components: {Add},
        data(){
            return{
               addActive : ''
            }
        },
        methods: {
           openAdd() {
               this.addActive = '';
           }
        }
    }
</script>

Add.vue (модальный):

<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>

Любая помощь приветствуется!Приветствия и спасибо !!

Я попытался повернуть открытое значение Add.vue, чтобы получить значение true, и модальное состояние появляется.Но когда я пытаюсь использовать кнопку, чтобы установить ее значение в true, она не работает как-то.

Answer 1

Вы определяете

addActive как пустую строку в Home.vue

Вы пробовали

addActive: false (или true, если вы хотите, чтобы он открылся сразу)

но вы должны определить в реквизитах как логическое значение и передать их соответственно, а не в data ()