Как включить обещания в методы vuejs - PullRequest
Новая
       24

Как включить обещания в методы vuejs

0 голосов
/ 28 октября 2018

Код ниже имеет методы vuejs.Один вызывает другого через функцию обещания.Как я могу сделать, чтобы сначала вызывался handleStart, а затем, если все сделано верно, foo будет решено, а handleStart завершится. Сначала нужно нажать кнопку запуска 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button
            @click="handleStart"
            >
            START
        </button>
        <button
        @click="done = true"
        >DONE</button>
        <h1>Start the app: {{start}}</h1>
        <h1>Is it done? {{done}}</h1>


    </div>
    <script>
        var app = new Vue({
            el: '#app', 
            data () {
                return {
                    start: false,
                    done:false 
                }
            }, 
            methods: {
                foo() {
                    return new Promise( (resolve) => {
                        if (this.done) {
                            console.log("done is recorded")
                            resolve("Yaa")
                        }
                    })
                }, 
                handleStart () {
                    this.start = true
                    // how to make this an obsersable 
                    this.foo()
                        .then( (data ) => console.log("I must be printed with:", data))
                }
            }
        })
    </script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

вам нужно использовать наблюдателей, чтобы посмотреть this.done изменить 

watch: {
  done(newVal, oldVal) {
    if (newVal) {
      // do something
    }
  }
}, 
methods: {
  async handleStart () {
    // how to make this async
    this.start = true
    const data = await this.foo()
    console.log("I must be printed with:", data))
  }
}
0 голосов
/ 28 октября 2018

Проблема с проверкой if (this.done).
Когда done ложно, обещание никогда не разрешается, и handleStart никогда не получает данные.

Если вам нужно реагировать, когда data изменилось, посмотрите наблюдателей Vue

...