Question

我有一个模板：

<template id="chat-template">
    <div class="row hidden-xs-up" id="messages">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-xs-8">{{ player.username }}</div>
                        <div class="col-xs-4">
                            <div class="pull-right">
                                <i class="fa fa-cog settings"></i>
                                <i class="fa fa-minus minimize"></i>
                                <i class="fa fa-close end"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-block">
                <!-- MESSAGES -->
                </div>
                <div class="card-footer">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Type your message here...">
                        <span class="input-group-btn">
                            <button class="btn btn-success-outline" type="button" v-bind:target_id="{{ player.target_id }}"><i class="fa fa-paper-plane-o"></i></button>
                        </span>
                    </div>   
                </div>
            </div>
        </div>
    </div>    
</template>

组件声明：

var chatWindow = Vue.extend({
    props: ['player'],
    template: '#chat-template'
});

在方法内：

this.$http.post(url, data, this.options).then(function(response) {
                if(response.data.status == 200) {

                } else if (response.data.status == 600){

                }

            }, function(response) {
                //handling request errors
                console.log('Error: ' + response.data.status);
            });

我正在构建消息传递系统，我需要动态呈现显示聊天窗口的新组件，并将其实例添加到主HTML中的特定类中。当我收到来自后端的回复时，如何添加这个新内容？

Answer 1

您应该从头开始包含该组件，并在加载邮件时使用v-if进行呈现。类似的东西：

<chat-window v-if="messagesLoaded"></chat-window>

if(response.data.status == 200) {
    this.messages = response.data;
    this.messagesLoaded = true;    
}

Vue背后的想法是你永远不会手动渲染/追加任何东西到DOM，你只需创建布局并让javascript值驱动不断变化的DOM。除非值为true，否则v-if将不会呈现，因此在需要之前不会构建组件。

如果您需要多次对话，请执行

<template v-for="conversation in conversations">
    <chat-window :messages="conversation.messages">
    </chat-window>
</template>

这将为每个对话创建一个聊天窗口

动态渲染控制器

1 个答案: