Create a Vue application that utilizes a promise to display content and then waits for user input

Question

Create a Vue application that utilizes a promise to display content and then waits for user input

Seeking guidance for a design query, I am dealing with a JavaScript script that is heavy on logic. It is structured using promises as shown below:

init()
    .then(result => doSomethingA(result)) 
    .then(result => doSomethingB(result))
    .then(result => loadVueApp(result))

The loadVueApp() function trigger the following actions:

new Vue({
  el : '#app',
  render : h => h(App)
});

This code renders the Vue app, allowing user interaction to navigate screens and make selections stored in a global EventBus type component.

My question pertains to passing user choices back to the tower of promises. Is this necessary, and if so, how should it be handled?

One approach is to resolve the loadVueApp immediately upon the app's appearance, then later initiate a function call back to the script containing heavy logic - although this method lacks elegance.

Any insights or suggestions would be appreciated.

Thank you in advance.

javascript vue.js vuejs2 frontend

Answer 1

Answer №1

Below is a straightforward demonstration that showcases the following:

The Vue component is created from a template and added to the <body> element instead of an existing DOM element (useful if you want to hide the UI initially).
The promise only resolves with the entered text when the submit button is pressed. The component instance is then destroyed and taken out of the DOM.

const InputUI = {
  template: '#input-ui',
  data() {
    return {
      value: '',
    };
  },
};

function getInput() {
  return new Promise(resolve => {
    const inputUI = new Vue(InputUI);
    
    inputUI.$once('submit', value => {
      inputUI.$destroy();
      inputUI.$el.remove();
      resolve(value);
    });
    
    inputUI.$mount();
    document.body.appendChild(inputUI.$el);
  });
}

getInput().then(value => alert(value));

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<template id="input-ui">
  <div>
    <input v-model="value">
    <button @click="$emit('submit', value)">Submit</button>
  </div>
</template>

If utilizing single file components, your code structure would resemble something like this:

InputUI.vue

<template>
  <div>
    <input v-model="value">
    <button @click="$emit('submit', value)">Submit</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      value: '',
    };
  },
};

</script>

main.js

import Vue from 'vue';
import InputUI from './InputUI.vue';

function getInput() {
  return new Promise(resolve => {
    const InputUIVue = Vue.extend(InputUI);
    const inputUI = new InputUIVue();

    inputUI.$once('submit', value => {
      inputUI.$destroy();
      inputUI.$el.remove();
      resolve(value);
    });

    inputUI.$mount();
    document.body.appendChild(inputUI.$el);
  });
}

getInput().then(value => alert(value));

Answer 2

Below is a straightforward demonstration that showcases the following:

The Vue component is created from a template and added to the <body> element instead of an existing DOM element (useful if you want to hide the UI initially).
The promise only resolves with the entered text when the submit button is pressed. The component instance is then destroyed and taken out of the DOM.

const InputUI = {
  template: '#input-ui',
  data() {
    return {
      value: '',
    };
  },
};

function getInput() {
  return new Promise(resolve => {
    const inputUI = new Vue(InputUI);
    
    inputUI.$once('submit', value => {
      inputUI.$destroy();
      inputUI.$el.remove();
      resolve(value);
    });
    
    inputUI.$mount();
    document.body.appendChild(inputUI.$el);
  });
}

getInput().then(value => alert(value));

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<template id="input-ui">
  <div>
    <input v-model="value">
    <button @click="$emit('submit', value)">Submit</button>
  </div>
</template>

If utilizing single file components, your code structure would resemble something like this:

InputUI.vue

<template>
  <div>
    <input v-model="value">
    <button @click="$emit('submit', value)">Submit</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      value: '',
    };
  },
};

</script>

main.js

import Vue from 'vue';
import InputUI from './InputUI.vue';

function getInput() {
  return new Promise(resolve => {
    const InputUIVue = Vue.extend(InputUI);
    const inputUI = new InputUIVue();

    inputUI.$once('submit', value => {
      inputUI.$destroy();
      inputUI.$el.remove();
      resolve(value);
    });

    inputUI.$mount();
    document.body.appendChild(inputUI.$el);
  });
}

getInput().then(value => alert(value));

Create a Vue application that utilizes a promise to display content and then waits for user input

Answer №1

Similar questions

Troubleshooting: GSAP Scrolltrigger malfunctions when using multiple triggers

What is the most effective method for implementing COPY/INSERT functionality with cascading effects in PostgreSQL?

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

What is the best way to handle the rows that have been checked in the table?

Differences between Vue.js Composition API and Options API - utilizing posts ref within a v-for iteration

Stopping the execution of code in Node.js after returning a JSON response

Challenges with loading times in extensive AngularJS applications

What sets apart genuine user interactions from programmatically generated actions?

Displaying live data from an XMLHttpRequest in a Vue component in real-time

How do I navigate back to show the initial parent component instead of the nested child component in ReactJS?

Retrieving visual information from Google Street View entity

Angular Component - Array missing initial value in @Input property

Loop through the tabs array and display varying views based on conditionals

Transferring information from a Jade file to a Node.js server

Why is it that in IE9, submitting a basic form using jQuery doesn't seem to work?

Overlapping Divs - HTML Elements Crossing Paths

Toggling jQuery to show or hide content depending on the selector

The jQuery AJAX post request with JSON data may not include a post body when sending to specific URLs

When the parent div contains at least four divs, show the scroll arrow containers

JQuery - Issue with setTimeout Function on Mouseleave Event