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

Question

我正在使用标准 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>

（扩展面板和测试按钮正在运行！）在 /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

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

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

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

vue.js

vuetify.js