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的open值返回为true，并显示模式。但是，当我尝试使用该按钮将其值设置为true时，它不起作用。

Answer 1

您正在定义

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

您尝试过

addActive：false（如果希望立即打开，则为true）

但是您需要在props中定义为Boolean并相应地传递它们，而不是在data（）

中传递

Laravel + Quasar @单击以显示模式不起作用

1 个答案: