admin管理员组

文章数量:1332890

I have a design question, I currently have a logic heavy JS script, which I have written as various promises and created a structure as the below:

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

Now the loadVueApp() function calls does the following:

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

Which renders my Vue app, and then the user can interact with the app, go to various screens, make selections which I store in a global EventBus type ponent.

Now my question is, how should I pass the users choices back to my tower of promises? Should I be doing that at all?

I could resolve the loadVueApp right away based on simply the app appearing and then later make a function call back to the logic heavy script - but this does not feel as clean.

Any ideas?

Thanks in advance.

I have a design question, I currently have a logic heavy JS script, which I have written as various promises and created a structure as the below:

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

Now the loadVueApp() function calls does the following:

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

Which renders my Vue app, and then the user can interact with the app, go to various screens, make selections which I store in a global EventBus type ponent.

Now my question is, how should I pass the users choices back to my tower of promises? Should I be doing that at all?

I could resolve the loadVueApp right away based on simply the app appearing and then later make a function call back to the logic heavy script - but this does not feel as clean.

Any ideas?

Thanks in advance.

  • javascript
  • vue.js
  • vuejs2
  • frontend
Share Improve this question asked May 12, 2018 at 12:27 dendogdendog 3,3485 gold badges33 silver badges70 bronze badges 2
  • Why would you want to pass data back to the promise chain unless loadVueApp resolves only after a choice was made and the Vue ponent destroyed? (Is that the case? Otherwise why would you be chaining the promises in series like that?) – Decade Moon Commented May 12, 2018 at 13:04
  • yes, this is what I wanted to do - keep the promise unresolved until the user makes a selection and the app is closed. – dendog Commented May 12, 2018 at 13:27
Add a ment  | 

1 Answer 1

Reset to default 5

Here's a simple example which does the following:

  • The Vue ponent is instantiated from a template and appended to the <body> element, rather than from an existing DOM element (in case you don't want the UI to be initially visible).
  • The promise is only resolved with the inputted text when the submit button is clicked. The ponent instance is destroyed and removed from 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./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 you're using single file ponents, you would structure your code similar to 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));

本文标签： javascriptRender a Vue app using a promiseand await user inputStack Overflow

版权声明：本文标题：javascript - Render a Vue app using a promise, and await user input - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742296888a2448914.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。