Laravel +类星体@click显示模式不工作

Question

我第一次尝试使用类星体，我试图用一个按钮显示一个模态，但不知怎么这个值不会变成真，这会触发我的模态显示。

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)

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

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>

任何帮助都是非常感谢的！干杯，谢谢！！

我试着将Add.vue的开放值返回为true，模式就会出现。但是，当我尝试使用按钮将其值转换为true时，它不知何故不起作用。

Answer 1

你在定义

addActive作为Home.vue中的空字符串

你试过吗

addActive: false (如果您希望它立即打开，则为true )

但是您需要在道具中定义为布尔值，并相应地传递它们，而不是在data()中。