CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
Tom
Tom

Reputation: 323

Vue - closing dialog from child component

I'm using Vue and Vuetify and I'm having trouble closing a dialog from within a child component using $emit. In the main component I'm using v:on:close-dialog="closeDialog" and setting this.dialog = false. I'm trying to call that function from within the child. Trying three different ways:

  1. On the <v-icon>close</v-icon> in the child component, I'm calling a closeDialog method that calls this.$emit('close-dialog').
  2. On the <v-btn>Cancel</v-btn>, I have v-on:click="$emit('close-dialog')".
  3. On the <v-btn>Cancel 2</v-btn>, I have v-on:click="$emit('dialog',false)".

None of those close the dialog or fire off the closeDialog method in the main component. Code is below.

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>

As you might have guessed, I'm new to Vue and still fumbling my way through it. Any help would be much appreciated.

Upvotes: 8

Views: 15040

Answers (1)

ryeMoss
ryeMoss

Reputation: 4343

In your parent you have:

    <childComponent v:on:close-dialog="closeDialog" />

it should be (hyphen replaces colon in v-on):

    <childComponent v-on:close-dialog="closeDialog" />

or @close-dialog altenatively.

This method, combined with this.$emit('close-dialog'); in your child should work.

Upvotes: 11

Related Questions