在其他实例中发出 go-modal 什么都不做，如何调用模态？答案

【问题标题】：emit go-modal at other instance do nothing, how to call modal?在其他实例中发出 go-modal 什么都不做，如何调用模态？
【发布时间】：2018-03-12 10:36:25
【问题描述】：

我使用标准的vuetifyjs/dialogs...所有脚本和模板都在同一页面中，没有服务器端。页面中的顺序是这样的：

 <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>

（扩展面板和 TEST btn 正在工作！）并在 /body 脚本之后作为

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

【问题讨论】：

你没有定义lexLista。我想你想要mainVue.$on('go-modal', ...)，对吧？
嗨@thanksd，谢谢，我编辑了...但没有改变问题...

标签： vue.js vuetify.js

【解决方案1】：

要动态打开对话框，需要将dialog 设置为true。所以只需在handleMain 方法的最后一行添加this.dialog = true;。

这是一个基本示例：

// 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>

【讨论】：