html
<div id="app">
{{ message }}
<button v-on:click="openDialog">ボタン</button>
</div>
Javascript
※ダイアログを表示するが、消す処理は入れてない
// ダイアログ用のVueのサブクラス作成
let dialog = Vue.extend({
template: '<div>ダイアログ</div>'
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
openDialog: function () {
// ダイアログ用のvueインスタンスを作成(el要素が無いためアンマウント状態)
let daialogInstance = new dialog();
// ダイアログ用のインスタンスをマウント
let daialog = daialogInstance.$mount();
// ダイアログの要素を#appの要素内にappendする
this.$el.appendChild(daialog.$el);
}
}
});
CodePen:https://codepen.io/hukuzatsu/pen/ZEEZVjO?editors=1111
参考:https://kitak.hatenablog.jp/category/Vue?page=1493443912