[Vuejs]-Vue.js dialog/modal closes on parent component

by

0👍

Try this one 

    <v-dialog
        v-model="show"
    >
        <v-card>
            <v-card-actions>
                <v-container grid-list-md text-xs-center>
                    <v-layout row wrap>
                        <canvas-preview-source-upload 
                            :imgSrc="imgSrc"
                            @close.stop="show=false">
                        </canvas-preview-source-upload>
                    </v-layout>
                </v-container>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import CanvasPreviewSourceUpload from './CanvasPreviewSourceUpload';

export default {
    components: {
        'canvas-preview-source-upload': CanvasPreviewSourceUpload
    },
    data: ()=> ({
      show: false
    }),
    props: {
        imgSrc: String,
        visible: Boolean   
    }, 
    watch: {
      show(isShow){
        if (!isShow) {
            this.$emit('closePreview');
        }
      }
      visible(isVisible) {
        this.show = isVisible;
      }
    }
}
</script>```

0👍

Something like this should allow you to open a v-dialog from a separate component..

If you supply a CodePen or CodeSandbox with your code in it, we would be able to better assist you.

[CodePen mirror]

const dialog = {
  template: "#dialog",
  props: {
    value: {
      type: Boolean,
      required: true
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      }
    }
  },
};

const dialogWrapper = {
  template: "#dialogWrapper",
  components: {
    appDialog: dialog,
  },
  data() {
    return {
      isShown: false,
    }
  }
}

new Vue({
  el: "#app",
  components: {
    dialogWrapper
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-content>
      <dialog-wrapper/>
    </v-content>
  </v-app>
</div>

<script type="text/x-template" id="dialog">
  <v-dialog v-model="show">
    <v-card>
      <v-card-actions pa-0>
        <v-spacer/>
        <v-btn dark small color="red" @click="show = false">Close</v-btn>
        <v-spacer/>
      </v-card-actions>
      <v-card-title class="justify-center">
        <h2>
          Hello from the child dialog
        </h2>
      </v-card-title>
    </v-card>
  </v-dialog>
</script>

<script type="text/x-template" id="dialogWrapper">
  <div>
    <h1 class="text-xs-center">I am the wrapper/parent</h1>
    <v-container>
      <v-layout justify-center>
        <v-btn color="primary" dark @click.stop="isShown = true">
          Open Dialog
        </v-btn>
      </v-layout>
    </v-container>
    <app-dialog v-model="isShown"></app-dialog>
  </div>
</script>

Leave a comment