emit go-modal at other instance do nothing, how to call modal?

Question

I am using standard vuetifyjs/dialogs... All scripts and templates in the same page, no server-side. The sequence in the page is something as:

 <div id="main"> ... 
   <v-expansion-panel>...<!-- v-for... -->
      <v-btn @click="$emit('go-modal', {title: 'Hello', body: 'Bye!'})">Go</v-btn>
    ...
   </v-expansion-panel>
 </div>
...
<div id="appDlg">...
   <v-dialog v-model="dialog" fullscreen>...
     <v-btn color="primary" dark slot="activator">TEST</v-btn>
     ...
   </v-dialog>
</div>

(the expansion-panel and TEST btn are working!) and after /body script as

var mainVue = new Vue({el: '#main',...});
new Vue({
  el: '#appDlg',
  //data () { return {
  data: {
      dialog: false,
      notifications: false,
      sound: true,
      widgets: false,
      ct_header: 'the header1 here',
      ct_body: 'the body1 here'
  },
  //}} // func data
  mounted() {
    mainVue.$on('go-modal', this.handleMain);
  },
  methods: {
    handleMain(data) {
      this.ct_header = data.title;
      this.ct_body = data.body;
    }
  }
}) //vue instance

You don't define `lexLista`. I think you want `mainVue.$on('go-modal', ...)`, right? — thanksd, Mar 15 '18 at 16:57
Hi @thanksd, thanks, I edited... But not changed the problem... — Peter Krauss, Mar 15 '18 at 20:59

thanksd · Accepted Answer · 2018-03-15T21:26:09.583

To dynamically open the dialog, you need to set dialog to true. So just add this.dialog = true; in the last line of your handleMain method.

Here's a basic example:

// to get rid of "missing v-app" error message
var app = document.createElement('div');
app.setAttribute('data-app', true);
document.body.appendChild(app);

let mainVue = new Vue({ el: '#main' });

new Vue({
  el: '#appDlg',
  data() {
    return {
      dialog: false,
      ct_header: 'the header1 here',
      ct_body: 'the body1 here'
    }
  },
  mounted() {
    mainVue.$on('go-modal', this.handleMain);
  },
  methods: {
    handleMain(data) {
      this.ct_header = data.title;
      this.ct_body = data.body;          
      this.dialog = true;
    }
  }
});

.myDialog { 
  padding: 10px;
  height: 100%;
  background-color: white; 
}

.myDialog .btn { margin: 20px 0 0 -4px; }

<link href="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

<div id="main">
  <v-expansion-panel>
    <v-btn @click="$emit('go-modal', {title: 'Hello', body: 'Bye!'})">Go</v-btn>
  </v-expansion-panel>
</div>

<div id="appDlg">
  <v-dialog v-model="dialog" fullscreen>
    <v-btn color="primary" dark slot="activator">TEST</v-btn>
    <div class="myDialog">
      <h4>{{ ct_header }}</h4>
      <div>{{ ct_body }}</div>
      <v-btn @click="dialog = false">Close</v-btn>
    </div>
  </v-dialog>
</div>

emit go-modal at other instance do nothing, how to call modal?

1 Answers1

Linked