Question

我在Laravel 5.7中使用Vue 2，在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()才能实现承诺中的价值，而且我处在与开始时相同的情况。

有什么想法吗？

Answer 1

getFacebookObjectInteractions返回一个promise对象，而不是您期望的对象。这就是为什么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

在Promise.all（）中返回值

1 个答案: