Solved

Possible to create Modal with Vue???

  • 1 March 2021
  • 1 reply
  • 27 views

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

Best answer by Keer 20 April 2021, 18:24

Hello @Shan, apologies for the delay in getting back to you on this thread. We do have an exclusive forum for developers where you can get post your queries on app development and product features. 

Could you please post this in  https://community.developers.freshworks.com/  so that our developers would be able to dig deeper into the code you’d shared and help you further? 

Thanks and have a good day!

View original

1 reply

Userlevel 4
Badge +2

Hello @Shan, apologies for the delay in getting back to you on this thread. We do have an exclusive forum for developers where you can get post your queries on app development and product features. 

Could you please post this in  https://community.developers.freshworks.com/  so that our developers would be able to dig deeper into the code you’d shared and help you further? 

Thanks and have a good day!

Reply