Question

Possible to create Modal with Vue???


  • New Participant
  • 0 replies
Hello Community,
 
Has anyone tried to create Modal with Vue??? I am facing a technical problem while creating one.
 
What I tried to do is to create an app at location ticket_top_navigation. When the user clicks it, a Modal will be shown. In this Modal, the user can see a login form, and when he/she login, he/she will see a table containing some basic data in this Modal.  I implemented that with a combination of Vue Version 2 template (generated by Vue Cli) and the default app template (generated by fdk create).
 
The problem is that the Vue elements cannot be displayed in the Modal after the Vue instance is mounted, or it just takes forever to render the login form in the Modal.
Here is the main.ts file to show how my code is for creating the Modal and mounting the Vue instance
import Vue from "vue";
import App from "./App.vue";
import store from "./store";

Vue.config.productionTip = false;

const vm = new Vue({
store,
render: (h) => h(App),
created() {
console.log("Created");
},
mounted() {
console.log("Mounted");
},
});

export let client;

function onAppActivate() {
client.interface
.trigger("showModal", {
title: "Basic Data Modal",
template: "index.html",
})
.then(function (data) {
vm.$mount("#app");
})
.catch(function (error) {
console.error(error);
});
}

function handleErr(err) {
console.error(`Error occured. Details:`, err);
}

document.onreadystatechange = function () {
function renderApp() {
const onInit = app.initialized();

function getClient(_client) {
client = _client;
client.events.on("app.activated", onAppActivate);
}

onInit.then(getClient).catch(handleErr);
}

if (document.readyState === "interactive") renderApp();
};

 

 
Any advice would be appreciated.

0 replies

Join the Group to Participate in this Discussion

Reply