Возвращаемое значение в Promise.all () - PullRequest
Новая
       16

Возвращаемое значение в Promise.all ()

0 голосов
/ 15 ноября 2018

Я использую Vue 2 в Laravel 5.7, а в компоненте Vue внутри цикла v-for есть следующее: 

<p v-html="getFacebookObjectInteractions(activities.id)"></p>

... отсюда activities.id,и это вызывает: 

getFacebookObjectInteractions: function (object_id) {

    var self = this;

    var promiseMessages = new Promise(function(resolve, reject) {
        self.getFacebookObjectComments(object_id, function (commentCount) {
            resolve(commentCount + " comments");
        });
    });

    // ... other methods go here.

    return Promise.all([
        promiseMessages, promiseLikes, promiseShares
    ]).then(function(messages) {
        var message = [];
        message.push(messages);
        var messageString = "Engagement " + message.join(", ") + ".";
        console.log(messageString);
        return messageString;
    });

}

Мне нужно последнее return, чтобы отправить результат .join() на v-html, но вместо этого я получаю {}.

Но console.log(messageString); выплевывает правильное строковое значение:

Участие: 2 комментария, 3 лайка, 1 публикация.

Если я делаю: 

var something = Promise.all(...

... Мне нужно сделать .then(), чтобы получить значение в обещании, и я нахожусь в той же ситуации, с которой начал.

Есть идеи?

1 Ответ

0 голосов
/ 15 ноября 2018

getFacebookObjectInteractions возвращает объект обещания, а не объект, который вы ожидаете. Вот почему HTML не отображается. Вместо этого вы должны установить v-html для данных или вычисляемого свойства. Затем, когда компонент смонтирован, вы можете вызвать getFacebookObjectInteractions, который в конечном итоге обновит это свойство, а затем Vue повторно выполнит рендеринг компонента с правильным html.

Исходя из вашего кода, немного неясно, откуда берутся действия, поэтому вам, возможно, придется реструктурировать свой код еще дальше, но это должно дать вам основную идею.

Итак, в вашем HTML:

<p v-html="html"></p>

Тогда в вашем компоненте Vue 

{
    data(){
        return { html : "" }
    }
    methods : {
        getFacebookObjectInteractions(object_id){
            // ...
            Promise.all(...).then( (messages) => {
                // ...
                // Update your reactive property
                this.html = messageString
            })
        }
    }
    // Called when the component is mounted
    mounted(){
       this.getFacebookObjectInteractions(activities.id)
    }
}

Смотрите более подробный пример здесь: https://medium.com/js-dojo/async-in-vuejs-part-2-45e81c836e38

...