Я использую Vue и Vuetify, и у меня возникают проблемы при закрытии диалога из дочернего компонента с помощью $ emit.В основном компоненте я использую v: on: close-dialog = "closeDialog" и устанавливаю this.dialog = false.Я пытаюсь вызвать эту функцию изнутри ребенка.Пытаясь тремя различными способами:
- На
<v-icon>close</v-icon> в дочернем компоненте я вызываю метод closeDialog, который вызывает это. $ Emit ('close-dialog'). - На
<v-btn>Cancel</v-btn> у меня есть v-on: click = "$ emit ('close-dialog')". - На
<v-btn>Cancel 2</v-btn> у меня есть v-on: click = "$ emit('dialog', false) ".
Никто из них не закрывает диалоговое окно и не запускает метод closeDialog в основном компоненте.Код приведен ниже.
mainComponent:
<template>
<v-flex>
<v-flex xs12 class="text-xs-right">
<v-dialog v-model="dialog" fullscreen hide-overlay
transition="dialog-bottom-transition">
<v-btn fab slot="activator" small color="red" dark>
<v-icon dark >add</v-icon>
</v-btn>
<childComponent v:on:close-dialog="closeDialog" />
</v-dialog>
</v-flex>
</v-flex>
</template>
<script>
import childComponent from './childComponent'
export default {
data(){
return{
dialog: false
}
},
name: 'Test',
components: {
childComponent
},
methods:{
closeDialog: function(){
console.log('close dialog 2');
this.dialog = false;
}
}
}
</script>
childComponent:
<template>
<v-flex xs12>
<v-card>
<v-toolbar dark color="primary">
<v-btn icon dark v-on:click="closeDialog">
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Dialog Test</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat v-on:click="$emit('close-dialog')">Cancel</v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat v-on:click="$emit('dialog',false)">Cancel 2</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-flex xs12 class="px-10">
<v-form ref="form">
<v-text-field
v-model="testField"
:counter="150"
label="Test field"
required
></v-text-field>
</v-form>
</v-flex>
</v-card>
</v-flex>
</template>
<script>
export default {
data: () => ({
testField: ''
}),
methods: {
closeDialog: function(){
console.log('close dialog 1');
this.$emit('close-dialog');
}
}
}
</script>
Как вы уже догадались, я новичок в Vue и все еще перебираю свой путь черезЭто.Любая помощь будет высоко ценится.