动态呈现控制器

我有一个模板：动态呈现控制器

<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中的特定类。当我从后端获得响应时，如何追加这个新内容？

来源

2016-01-25 nix9

您应该从头开始包含组件，只需使用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。除非该值为真，否则v-if将不会呈现，所以它不会在需要时才构建组件。

如果需要多个对话，只是做

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

这会为每次谈话

来源

2016-01-25 17:00:05 Jeff

这不是我所需要创建一个聊天窗口。当消息出现时，我需要呈现聊天框，或者我点击新消息按钮。 – nix9

使用'v-if'在表达式为真之前不呈现组件。所以直到'messagesLoaded'为true才会存在。 @ nix9 – Jeff

我知道，但它只会呈现一个聊天窗口。我需要他们几个取决于我打开的会话号码。 – nix9

动态呈现控制器

回答

相关问题