我正在使用VueJS Vuetify框架,我需要从另一个模板打开一个对话框 - 它作为组件模板导入.单击App.vue中的Menu按钮后,Modal应该打开.这是我的设置:
main.js
import Modal from './components/Modal.vue'
Vue.component('modal', Modal)
Run Code Online (Sandbox Code Playgroud)
Modal.vue模板:
<template>
<v-layout row justify-center>
<v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline">Use Google's location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Disagree</v-btn>
<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
</v-card-actions>
</v-card> …Run Code Online (Sandbox Code Playgroud) 我正在使用 Vuetify 对话框 这是我的代码
<v-dialog max-width="390" persistent v-model="dialog">
<template v-slot:activator="{ on }">
<v-btn icon v-if="el.items_count == 0" v-on="on" >
<v-icon>
mdi-plus
</v-icon>
</v-btn>
</template>
<v-card flat>
<v-card-title>
this is Son for {{el.title}}
</v-card-title>
<v-text-field class="d-block pa-2" v-model="name" outlined label="Name"></v-text-field>
<v-card-actions>
<v-btn @click="add" class="d-block">
<span>Add</span>
</v-btn>
<v-btn @click="dialog=false" class="d-block">
<span>Close</span>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
Run Code Online (Sandbox Code Playgroud)
和这个对话框在循环内并在单击按钮后收到此错误
Uncaught RangeError: Maximum call stack size exceeded.
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at …Run Code Online (Sandbox Code Playgroud)