如何在blade.php文件中触发vuetify对话框组件

Question

我正在使用laravel的vue。我已经使用vuetify对话框组件创建了一个NewDispenser.vue文件，并在该vue文件中添加了我需要的功能。现在，我在laravel views文件夹中有一个browse.blade.php文件，当用户单击此NewDispenser.vue文件上的按钮时，我想打开在browse.blade.php中创建的对话框组件。我已经将创建的组件导出到app.js文件中。我该如何实现？我已经尝试过一个例子，但对此感到困惑。任何帮助将不胜感激..

NewDispenser.vue文件

<template>
<v-app>
    <v-container>
        <v-layout row wrap>
             <v-dialog v-model="showModal" max-width="500px">
                <v-card>
                    <v-card-title>
                        <span class="headline">Add New Dispenser</span>
                    </v-card-title>

                    <v-card-text>
                    <v-container grid-list-md>
                        <v-layout wrap>
                        <v-flex xs12 sm6 md4>
                            <v-combobox
                                v-model="dispenser_data.dispenser_type"
                                :items="dispenser_types"
                                chips
                                label="Dispenser Type"
                            >
                                <template v-slot:selection="data">
                                <v-chip
                                    :key="JSON.stringify(data.item)"
                                    :selected="data.selected"
                                    :disabled="data.disabled"
                                    class="v-chip--select-multi"
                                    @click.stop="data.parent.selectedIndex = data.index"
                                    @input="data.parent.selectItem(data.item)"
                                >
                                    <v-avatar class="accent white--text">
                                    {{ data.item.slice(0, 1).toUpperCase() }}
                                    </v-avatar>
                                    {{ data.item }}
                                </v-chip>
                                </template>
                            </v-combobox>
                        </v-flex>
                        <v-flex xs12 sm6 md4>
                            <v-text-field v-model="dispenser_data.dispenser_serial" label="Dispenser Serial"></v-text-field>
                        </v-flex>
                        </v-layout>
                    </v-container>
                    </v-card-text>

                    <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
                    <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
                    </v-card-actions>
                </v-card>
                </v-dialog>
        </v-layout>
    </v-container>
</v-app>

<script>
import { mapGetters } from "vuex";
import io from 'socket.io-client';
export default {
     data () {
         return{
            socket:io('127.0.0.1:3000'),
            showModal: false,
            dispenser_data:{
                dispenser_type:'Choose..',
                dispenser_serial:''
            },
            dispenser_types:[
                'Compressor',
                'Eco Bubbler',
                'Electronic'
            ]
         }
     },
     props: ['show'],
     computed: {
        ...mapGetters(["newDispenserData"])
     },
     methods:{
         close: function () {
            this.$emit('close');
         },
         save(){
             if(this.dispenser_data.dispenser_type == 'Compressor'){
                  this.newDispenserData.dispenser_serial = '[C]'+this.dispenser_data.dispenser_serial
             }else if(this.dispenser_data.dispenser_type == 'Eco Bubbler'){
                 this.newDispenserData.dispenser_serial = '[B]'+this.dispenser_data.dispenser_serial
             }else{
                 this.newDispenserData.dispenser_serial = '[E]'+this.dispenser_data.dispenser_serial
             }
            this.newDispenserData.dispenser_type = this.dispenser_data.dispenser_type
            this.$store.dispatch("SAVE_NEW_DISPENSER",this.newDispenserData);
         },
     }
}

browse.blade.php

按钮

 <button type="button" class="btn btn-success" @click="showModal = true" name="button"><i class="fas fa-plus-circle"></i>&nbsp;Add New Dispenser</button>

组件

<div id="app">
 <add-new-dispenser :show.sync="showModal"></add-new-dispenser>
</div>